How to add unique Id's to html tags-CodePudding

I have a function in javascript that creates a bootstrap card with 3 textareas in it.

var AddCard = function() {  
  const card =
                ` <div >
       <div >
          <h5 style="font-weight: bold">Additional Entry</h5>
       </div>
       <div id="pnlEntry" >
          <div >

             <Label Class="row pl-3" runat="server">Detailed Action:</Label>
             <textarea  style="width: 100%;"  id="txtEngrActionDesc2" runat="server" cols="50" rows="2" ></textarea>

             <Label Class="row pl-3" runat="server" >IAW:</Label>
             <textarea  style="width: 100%;"  id="txtEngrIAW2"
             runat="server" cols="50" rows="2" maxlength="2000"></textarea>

             <Label Class="row pl-3" runat="server">Discrepancy Narrative:
             <Label Class="text-dark small" runat="server"> 
             </Label>(200 Character Limit)</Label>
             <textarea  style="width: 100%;"  
              id="txtEngrDiscrepNarrative2"
             runat="server" cols="50" rows="2" maxlength="200"></textarea>
                                
            
               <Label runat="server">Clcik to save this entry to the alert:</Label>
               <a id="btnSaveEntry"  >Save</a>
            
         </div>
      </div>
  </div> `

            const mainDiv = document.getElementById("divEntryPanel");
            mainDiv.innerHTML  = card
            document.getElementById("divEntryPanel").style.display = "inline"; 
}

With the creation of each card, I want each textarea to have unique id's. I've written javascript functions that are supposed to append unique id's to the tags, but they weren't successful. Any suggestions?

var AddDetailsFunc = function () {
            AddCard();
            $.unblockUI();

            $.each(function (index, entry) {
                    CreateEntry(entry.Key,'', '', '');
            });
        }

        var CreateEntry = function (entryId, DA, IAW, DN) {
            var txtDA = $(' id="txtEngrActionDesc2'   entryId   '" type="text" maxlength="2000"').addClass('form-control').val(DA);
            var txtIAW = $('input id="txtEngrIAW2'   entryId   '" type="text" maxlength="2000"').addClass('form-control').val(IAW);
            var txtDN = $('<input id="txtEngrDiscrepNarrative2'   entryId   '" type="text" maxlength="200">').addClass('form-control').val(DN);

            var idTD = $('<td>').addClass('text-center').append(entryId);
            var DATD = $('<textarea>').append(txtDA);
            var IAWTD = $('<textarea>').append(txtIAW); 
            var DNTD = $('<td>').addClass('text-center').append(txtDN);
            
            textarea.append(idTD).append(DATD).append(IAWTD).append(DNTD);
            $('#divEntryPanel').append(textarea);

        }

CodePudding user response：

As id is attribute of textarea tag, it should go like this

var textarea = $('<textarea>');
textarea.attr('id', 'someid');
$('#main').append(textarea);

Rather than doing it in a string variable build xml nodes. and in loop you can use index or key value to make it unique

$.each(function (index, entry) {
    var textarea = $('<textarea>');
    textarea.attr('id', 'name'   index);
    //textarea.attr('id', 'name'   entry.key);  // incase its unique 
    $('#main').append(textarea);
});

should out put like id='name1' for next tag id='name2'