quiero crear un formulario dinámico como si el usuario necesita agregar un atributo, pero esos atributos no definidos previamente puede agregar tantos como pueda, por ejemplo, creó un vestido, quiere agregar un atributo como el tamaño, hará clic en agregar atributo que generará un html he hecho esto pero necesito insertar alguna variable para poder cambiar el nombre de los atributos

 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") }

lo que quiero cambiar los campos de nombre en este html por la variable i