Javascript: Changing The Name Attribute Dynamically

I have this script I'm working on and there's no errors on it but I want to add some functions on it like when I click the button it adds but I want the name attribute of the input

Solution 1:

You're not doing anything to change the name attributes. Trying to make those changes with html concatenation will get you into trouble. This will get you started:

(function() {

  var a = 1;

  // get a reference to the containervar container = document.getElementById("m");
  // get a reference to the first row of inputvar base = container.children[0];  
  
  document.querySelector("button").addEventListener("click", function(e) {

    if(++a > 10) return;
    
    // clone the first row of inputvar clone = base.cloneNode(1);
    
    // change the number text by setting the span's textContent
    clone.children[0].textContent = a;
    // set the names of the input fields
    clone.children[1].name = "f" + a;
    clone.children[2].name = "l" + a;
    clone.children[3].name = "m" + a;
    
    // add the new row to the container
    container.appendChild(clone);
    
    console.log(clone);

  });

})();

<buttontype="button">+</button><divid="m"><div><span>1</span><inputtype="text"name="f1"><inputtype="text"name="l1"><inputtype="text"name="m1"></div></div>

If you'd rather create the elements from scratch...

(function() {

  var a = 1;

  // get a reference to the containervar container = document.getElementById("m");    
  var input;
  var span;
  var div;
  
  document.querySelector("button").addEventListener("click", function(e) {

    if(++a > 10) return;
    
    // create our div
    div = document.createElement("div");
    
    // create and append our span
    span = document.createElement("span");
    span.textContent = a;
    div.appendChild(span);
    
    // create and append inputs    
    ["f","l","m"].forEach(function(n){
       input = document.createElement("input");
       input.name = n + a;
       div.appendChild(input);            
    });
                
    // append our div
    container.appendChild(div);
    
    console.log(div);

  });

})();

<buttontype="button">+</button><divid="m"><div><span>1</span><inputtype="text"name="f1"><inputtype="text"name="l1"><inputtype="text"name="m1"></div></div>