Javascript 从链接点击中捕获ID并将其传递到弹出窗体中

我有三个链接，都有相同的类，但不同的ID的。单击带有类名的链接时，用户会看到一个弹出表单。我试图做的是从单击中捕获单个ID，并将其作为隐藏字段传递到表单中

<div id="IA"><a class="addProdClick">Get a Quote</a></div>
<div id="MP"><a class="addProdClick">Get a Quote</a></div>
<div id="GS"><a class="addProdClick">Get a Quote</a></div>

---

下面的代码段显示了如何使用jQuery获取已单击元素的父ID：

$（'.addProdClick'）。单击（函数（el）{
$（'#product'）.val（$（this.parent（）.attr（'id'））；
});

获得报价
获得报价
获得报价
一旦它出现在控制台日志中，如何将其拉入弹出表单的隐藏字段？我尝试过类似的代码片段，但没有成功。我无法解决的问题是如何将id存储在隐藏表单字段中。获取它不是一个问题，我只是不确定以后如何处理。如果您使用开发工具检查上面的代码段，您应该会看到当您单击任何链接时隐藏输入字段的值是如何变化的。如果您在自己的设置中无法实现此功能，也许您可以用小提琴或类似的方式共享问题的复制品？我主要要解决的问题是，当用户单击按钮时，表单以及隐藏字段不在屏幕上。这个按钮激活了弹出式表单，所以本质上，上面的代码试图给找不到的ID赋值，然后带ID的表单弹出。我明白了。您能否添加负责打开问题弹出窗口的代码？也许在创建表单后，您可以向下传递所选ID并将其填充到隐藏的输入中。
/*======== This is the popup form which is show to the user when they click the "Get a Quote." ========*/
<form id="addProdGateway" action="" method="post">
<input type="hidden" readonly="readonly" id="product" name="product" value="">
</form>

jQuery(document).on('submit','#addProdGateway',function(e) {
    e.preventDefault();
    validationAddProdGateway();

    /*======== AJAX to submit a Pardot Form Handler ========*/
}

function validationAddProdGateway()
{
    var x = 0;
    var theForm = document.forms["addProdGateway"];
    var email = theForm.elements["email"].value;
    var source = theForm.elements["source"].value;
    var product = theForm.elements["product"].value;
    var url;

    if (product = "IA")
    {
        url = "https://www.ia.com"
    }
    else if (product = "MP")
    {
        url = "https://www.mp.com"
    }
    else if (product = "GS")
    {
        url = "https://www.gs.com"
    }

    /*======== Form Validation ========*/

    window.location.href = url;
}