populate loop generated form fields with values from json with javascript

Question

I have a webpage using javascript and jquery.

I am trying to dynamically create content via a for loop.

The loop is over a array of json objects. Each object has a week string and a number integer.

each loop creates two buttons and a form field. The number needs to populate the form field.

When the loop executes the buttons and the form fields get created however the number only populates the first form field.

It populates it with every number.

so given the array

var testobject = [
      {
        week: '9/15/20',
        number: 6
      },
      {
        week: '10/13/20',
        number: 70
      },
      {
        week: '11/17,20',
        number: 34
      }
    ];

the first form field will populate with the number 6 then replaced by 70 then replaced by 34.

Rather each form field should have the number that corresponds to its iteration in the for loop.

first form field should have 6 second form field should have 70 third form field should have 34

here is the code in my loop:

for( i  = 0; i < testobject.length; i++){
        console.log(testobject);
        $("#forcastcontentrow").append("<div  class=\"col-xs-12\">\n" +
          `      <p class=\"text-left text-uppercase text-muted\">wk of ${testobject[i].week}</p>\n` +
          "    </div>\n" +
          "    <div class=\"col-xs-4 m-0 p-0\">\n" +
          "      <button class=\"btn btn-default btn-block m-0 p-0\"><span class=\"text-uppercase text-primary\">cbi</span></button>\n" +
          "    </div>\n" +
          "    <div class=\"col-xs-4 m-0 p-0\">\n" +
          "      <button class=\"btn btn-default btn-block m-0 p-0\"><span class=\"text-uppercase text-muted\">custom</span></button>\n" +
          "    </div>\n" +
          "    <div class=\"col-xs-4\">\n" +
          "      <form class=\"form-inline\">\n" +
          "        <input type=\"number\"\n" +
          "               class=\"form-control\"\n" +
          "               id=\"forcasteddeplietionsinput\">\n" +
          "      </form>\n" +
          "    </div>");
        document.getElementById('forcasteddeplietionsinput').value = testobject[i].number;

      } 

the document.getElementById('forcasteddeplietionsinput').value = testobject[i].number; is executed within the for loop so I am not sure why this is happening. What is wrong with my approach?

Answer 1

You need to change your selector for the text input element.

document.getElementById only returns the first element it finds in the DOM with the given id. Since your for loop is duplicating that id, this line will only ever change the first text input element:

document.getElementById('forcasteddeplietionsinput').value = testobject[i].number;

What you could do is change this line:

id=\"forcasteddeplietionsinput\">\n"

...to this:

class=\"forcasteddeplietionsinput\">\n"

...and then use getElementsByClassName to return an array of all the text inputs and index into it, like this:

document.getElementsByClassName('forcasteddeplietionsinput')[i].value = testobject[i].number;