Javascript 使用onclick following动态生成对象

我需要一个函数来创建一个div元素和一个对象，这样我就可以为每个div分配一个对象，以便以后使用它。这背后的想法是创建一个可视化界面，让您可以根据单击的框向具体对象添加值

例如：

单击一个框会将内容（在本例中为“”（无））加载到选择和输入，以便我可以更新它们

对象内容

{
            "Option1": "",
            "Option2": "",
            "Option3": "",
            "Option4": "",
            "Option5": "",

        }

我将使用选择和输入填充对象

我该怎么做？我创建了一个填充了选择和输入的单个对象：

var elements = document.querySelectorAll('.selectVal, input');
        var results = {};

        for (var i = 0; i < elements.length; i++) {
            var element = elements[i];
            var strSel = '';
            if (element.tagName == 'SELECT'){
                strSel = element.options[element.selectedIndex].text;
            }
            else if (element.tagName == 'INPUT'){
                strSel = element.value;
            }

            results[element.id] = strSel;
            console.log(results)
        }


        strSel = JSON.stringify(results, null, 4);
        var blob = new Blob([strSel], {type: "application/json"});
        var url  = URL.createObjectURL(blob);

        var a = document.createElement('a');
        a.download    = "archivo.json";
        a.href        = url;
        a.textContent = "Descargar JSON";

        console.log(strSel);
        document.getElementById('json').innerHTML = strSel;
        document.getElementById('download').appendChild(a);

现在是我迷路的地方，我如何控制新对象附加到此框并在每次单击时创建新对象？我最接近我想要的是：

            var boxes= [];
            var div = document.createElement('div');
            div.className = 'new-box';       
            document.getElementsByTagName('body')[0].appendChild(div);
            boxes.push(div);
            boxes.push(results);

但是我不想生成已经填充的框，我想用第二个参数clean生成它们，然后单击框填充它

            var boxes= [];
            var div = document.createElement('div');
            div.className = 'new-box';       
            document.getElementsByTagName('body')[0].appendChild(div);
            boxes.push(div);
            boxes.push(results);