Dynamically create variables based on HTML inputs made into dynamically added form fields, then use them in a for loop string

Question

I've played around with for loops many times in the past, but this is going way over my head when I want to use it with values from IDs in HTML, and moreover put these, separated, into a string.

I have a simple program so far with the help of another question that lets me add and remove input fields in HTML. However, I want to assign each form field's input value to a variable whenever one is added. Playing around, this seems to be difficult, because I can't call upon an ID in HTML in a for loop fashion.

At the end of it all, I wanted to put these into a dynamic string when new fields are added:

"The colors consist of " + colorNum0 + " and " + colorNum1 + ". They are all really cool colors."

But whenever a new variable is added (inputted into an added field), I want it to add another " and " + colorNum#.

The program seems to get confused if I add variables ahead of time that do not exist yet, or ever, if I do not add the form field for them.

Of course, creating a for loop doesn't work when I try something like:

var colorNum[i] = document.getElementById("field" + i).value

Because... that's not allowed. I'm having trouble figuring out how to make this happen. Right now I called out variables for colorNum, but I'm trying to do it dynamically. This is difficult when trying to get a value from an ID and transferring it to a for loop.

HTML:

<ul id="fields">
</ul>
<a onclick="createinput()">Create an input</a>

<p id="commentHere"><p>

JS:

var count = 0;
window.createinput = function(){
    var field_area = document.getElementById('fields')
    var li = document.createElement("li");
    var input = document.createElement("input");
    input.id = 'field' +count;
    input.name = 'field'+count;
    input.type = "text";
    li.appendChild(input);
    field_area.appendChild(li);
    //create the removal link
    var removalLink = document.createElement('a');
    removalLink.className = "remove";
    removalLink.onclick = function(){
        field_area.removeChild(li); 
        count--;
    }
    removalLink.appendChild(document.createTextNode('Remove Field'));
    li.appendChild(removalLink);
    count++;
    console.log(input.id);
  console.log("Count: " + count);
  
var colorNum0 = document.getElementById("field0").value;
var colorNum1;
var colorNum2;
  console.log(colorNum0);
  
var comment = "The colors consist of " + colorNum0 + " and " + colorNum1 + ". They are all really cool colors.";
  
document.getElementById("commentHere").innerHTML = comment;
  
}

Answer 1

You can get values of all inputs, using the following code snippet:

function getInputsData() {
  const inputs = document.getElementsByTagName('input');
  const data = [];
  for (let inp of inputs) {
    data.push(inp.value);
  }
  return data;
}

Considering that you don't have any other input fields. If you have, you can assign each input a class or id, as you did, and get the values:

function getInputsData() {
    const data = [];
    const inputs = document.getElementsByClassName('field');
    for (let inp of inputs) {        
        data.push(inp.value);
    }
    return data;
}

For this case, I've added class for each input field:

input.classList.add('field')

Answer 2

Bergi's comment helped me enough for what I had. I will not be checking this today so I thought I should mark it answered for now. What I had was fine, I just had to assign colorNum to an array. As for putting this in my string, I'll have to play around a bit another day - doesn't need to be in a loaded question.

Edit: Unless someone has an idea for the string? I am going to try and figure out how to list each item in the array in the string separated by text without creating dozens of new variables for each input.

Edit 2: I figured out how I will do the part above. After I do have the array, I just have to convert to a string and then split/insert/other string work from there.

var colorNumX = [];
for (i = 0; i <= count - 1; i++) {
   colorNumX[i] = document.getElementById("field" + i).value;
}

var colorString = colorNum.toString();