how to create the dynamic form fields in javascript

Question

i want to create a dynamic form like the user needs to add attribute but those attribute not defined previously he can add as many he can for example he created a dress he want to add attribute like size he will click on add attribuute that will generate an html i have did this but there i need to insert some variable so i can change the name of the attributes

var i =1;
function add_fields() {
    var emptydiv = document.createElement('div')
    emptydiv.innerHTML = '<div class="col-12 col-md-6"><div class="group"><input type="text" name="`{i}`" id="Royalties" required><span class="highlight"></span><span class="bar"></span><label>Attributes</label></div></div><div class="col-12 col-md-6"><div class="group"><input type="text" name="Size" id="Size" required><span class="highlight"></span><span class="bar"></span><label>value</label></div></div></div>'
    document.getElementById('addable').appendChild(emptydiv);
    i++;
    console.log(i)
    return emptydiv;     
    // console.log("Hello world")                   
}

what i want to change the name fields in this html by the variable i

Answer 1

I believe this is what you are trying to accomplish.

I changed regular single quotes into a template literal

 var i =1; function add_fields() { var emptydiv = document.createElement('div') emptydiv.innerHTML = `<div class="col-12 col-md-6"><div class="group"><input type="text" name="${i}" required><span class="highlight"></span><span class="bar"></span><label>Attributes</label></div></div><div class="col-12 col-md-6"><div class="group"><input type="text" name="Size" id="Size" required><span class="highlight"></span><span class="bar"></span><label>value</label></div></div></div>` document.getElementById('addable').appendChild(emptydiv); i++; console.log(i) return emptydiv; // console.log("Hello world") } add_fields();

 <div id="addable"></div>