How to retrieve html element id which html element is created inside the jquery?

Question

In common retrieve data, the html was actually store in the html file, but in my case, I create the html element inside the jquery, then how did I call out the div id?

how to replace the document.getElementByID ("edit").innerHTML=.... which the element id is actually not inside the html but inside the jquery.

The table that I have created in inner HTML is only the header which is the (USER,EMAIL,USERTYPE,EDIT,DELETE). All the data was actually retrive from (User until the usertype was actually retrieve from firebase. Then I try to add the edit and delete button in it. which the code is show as below:

\\Code that use to create table and the data is retrieve from firebase
firebase.database().ref("users").orderByKey().once("value").then(function (snapshot) {
             var counter = 0;
        snapshot.forEach(function(childSnapshot) {
            counter+=1;
            var user = childSnapshot.ref.getKey();
            var email = childSnapshot.child("email").val();
            var usertype = childSnapshot.child("usertype").val();
            //the edit was I trying to change the div 'id' into the specific user that get from firebase by row of data and use it as unique id to call the data into the form.

             var edit = user;
             $(".edit").attr("id",edit);
                    
   
        $("#table_body1").append('<tr><td>' + counter  +'</td> <td>' + user  +'</td> <td>' + email +'</td> <td>' + usertype   +'</td> <td>' + `<div class="Edit" name="edit" onclick="div_show()"><img src = "edit.png"></div>`+'</td> <td>' + `<div class="Edit" name="delete" onclick="delete_show()"><img src = "delete.png"></div>` + '</td> </tr>');           
      });                

});


function div_show() {
document.getElementById('abc').style.display = "block";

              var  user= document.getElementsById("edit");

      var firebase = firebase.database().ref('users/'+user).once('value').then(function (snapshot){     
                    var email = snapshot.val().email;
                    var usertype = snapshot.val().usertype;
                    document.getElementById("email").innerHTML=email;
                    document.getElementById("usertype").innerHTML=userType;
                    
                })
            }

HTML Code:

<div id="abc">
    <!-- Popup Div Starts Here -->
<div id="popupContact">
    <!-- Contact Us Form -->
<form action="#" id="form" method="post" name="form">
<img id="close" src="images/3.png" onclick ="div_hide()">
<h2 >Edit</h2>
<hr>
<input id="userID" name="UserID" placeholder="User = user1" type="text">
<input id="email" name="email" placeholder="Email = timmyscottmy@gmail.com" type="text">
<input id="userType" name="usertype" placeholder="User type = lecturer" type="text">
<a href="javascript:%20check_empty()" id="update">Update</a>
<a href="javascript:%20check_empty()" id="cancel" onclick ="div_hide()">Cancel</a>
</form>
</div>

Answer 1

It is not recommended to have inline event handlers - ESPECIALLY not when you have very simple event delegation in jQuery. To edit/delete a row, you would do

$("#table_body1").on("click",".edit",function() { div_show(this.dataset.user) }); // pass something that identifies the row 
$("#table_body1").on("click",".delete",function() { $(this).closest("tr").remove() }) 

where the button you add has class="delete"

$("#table_body1").append(
  `<tr>
    <td>${counter}</td>
    <td>${user}</td> 
    <td>${email}</td> 
    <td>${usertype}</td> 
    <td class="edit" data-user="${user}"><img src="edit.png"></td> 
    <td class="delete"><img src="delete.png"></td> 
  </tr>`);