使用来自两个源的Javascript的动态字典

我对JavaScript还不熟悉，我想在这一点上，我可能已经吃得太多了。本质上，我正在尝试制作一个字典（如果相关的话，它最终将被序列化为JSON），允许用户定义任意数量的条目，并根据自己的意愿设置键和值。我正在考虑另一个实现想法，但到目前为止，我一直试图解决这个问题

我有一个按钮来调用下面的代码，这完全是为newVariableDescription类模拟的。这将在web表单上创建文本输入框

    var nameElement = document.createElement("input");
    nameElement.type = "text";
    nameElement.className = "newVariableName";
    var nameDiv = document.createElement("div");
    nameDiv.type = "div";
    nameDiv.appendChild(nameElement);
    var newVariableNamesDiv = document.getElementById("newVariableNamesDiv");
    newVariableNamesDiv.appendChild(nameDiv);

    var descriptionElement = document.createElement("input");
    descriptionElement.type = "text";
    descriptionElement.className = "newVariableDescription";
    var descriptionDiv = document.createElement("div");
    descriptionDiv.type = "div";
    descriptionDiv.appendChild(descriptionElement);
    var newVariableDescriptionsDiv = document.getElementById("newVariableDescriptionsDiv");
    newVariableDescriptionsDiv.appendChild(descriptionDiv);

现在，这部分起作用了。我得到了所有的文本框显示就像我想要的，并可以输入到他们。但是，我不知道如何动态访问此列表并将它们配对

此线程与我想做的非常相似：

但我不知道如何让这段代码实现我想要的功能：

var dictionary = {};
$('.newVariableName).each(function (index) {
    dictionary['['+index+'].Key'] = $(this).val();
    dictionary['['+index+'].Value'] = //access corresponding newVariableDescription here
});

显然，我可以用另一个类（newVariableDescription）创建第二个循环，但这并不能将它们正确地绑定在一起。我可以将它们存储在各自独立的列表中，然后将这两个列表合并到一个字典中，但我担心的是顺序是否保持一致，这不是一个优雅的解决方案

---

提前感谢您的帮助。

如果我没有弄错，您希望选择这样的选项

---

什么是

newVariableDescription

？它是第二个类，用于使用与newVariableName相同的代码创建的一组文本输入。我只是不想复制/粘贴它，因为它除了名称更改外，完全相同。我在寻找：variables[$（this.val（）]=$（'.newvariablescription:eq（'+index+'））.val（）；但它离我很近，我能从那里找到答案，所以谢谢你。

var dictionary = {};
$('.newVariableName').each(function (index) {
    dictionary['['+index+'].Key'] = $(this).val();
    dictionary['['+index+'].Value'] = $('.newVariableDescription:eq('+index+')').val();
});