Camunda dynamic form creation with javascript

Question

I have created a Camunda html form with javascript, which is able to dynamically create input elements from an array. Unfortunately it does not set the process variables after I completed the task in Camunda tasklist.

Here is the form html/javascript:

<form>
  <div id="inputContainer" class="form-group"></div>

  <script cam-script type="text/form-script">
    var inputArray = ["Test", "Test1", "Test2"]; //camForm.variableManager.variable("product_list");
    camForm.on("form-loaded", function () {
      camForm.variableManager.fetchVariable("product_list");
    });

    camForm.on('variables-fetched', function() {
        const str = camForm.variableManager.variableValue('product_list');
        inputArray = JSON.parse(str);
        var inputContainer = document.getElementById("inputContainer");

        for(let i = 0; i < inputArray.length; i++) {
            var countInput = document.createElement("input");
            //countInput.type = "number";
            countInput.id = "input" + i;
            countInput.setAttribute("required", "")
            countInput.setAttribute("cam-variable-name", "count_product_" + inputArray[i].id);
            countInput.setAttribute("cam-variable-type", "Integer");
            countInput.setAttribute("class", "form-control");

            var label = document.createElement("label");
            label.htmlFor = "input" + i;
            label.appendChild(document.createTextNode(inputArray[i].name));



            inputContainer.appendChild(label);
            inputContainer.appendChild(countInput);
            inputContainer.appendChild(document.createElement("br"));
      }

    });
  </script>
</form>

It renders the html input elements properly as follows: <input id="input0" required cam-variable-name="count_product_0" cam-variable-type="Integer" class="form-control">

Has anyone an idea why it´s not setting the process variables after completing the task?

Thanks in advance!