How can I assign unique ID to innerhtml element?

July 15, 2022

I have this function:

function displayInputIntro() {
                var submitbutton = document.getElementById('submitbutton')
                var intro = document.getElementById('Intro') 
                var introNewSection = document.getElementById('intro-row')
                introNewSection.innerHTML += '<div class="col-lg-5 mb-lg-0 mb-4" id="intro">';
                submitbutton.style.display = ''
}

This function displayInputIntro() can be called multiple times, and it will insert this new section into the body of the HTML as many times as one decides to do so. Problem is, I want to add a unique identifier, so that if I were to add something like this:

introNewSection.innerHTML += '<div class="col-lg-5 mb-lg-0 mb-4" id="intro"><a href="javascript;;" onclick="deleteInputFunc()">Remove Input</a>';,

and click on Remove Input, then it would delete the input, not all of them.

I have tried something like this:

var uniqueID = new Date()
introNewSection.innerHTML += '<div class="col-lg-5 mb-lg-0 mb-4" id="' + uniqueID '"'><a href="javascript;;"  onclick="deleteInputFunc()">Remove Input</a>';, and click on `Remove Input`, then it would delete the input, not all of them.

but that doesn’t work. How can I do this?

>Solution :

you are passing an string to html code, not the real JS variable.
You can try something like this thant I found in How can I apply a variable as an element ID with JavaScript?:

 var id = new Date();

 var html ='<li id="' + id + '">'
           + '<input type="image" id="' + id + '" src="images/subtract.png" onclick="javascript:deleteProduct(this.id)" href="#">'
           + id
       + '</li>';