JSFiddle - React, Tailwind, and code Playground

HTML

<div class='parent-list-workorder'>
     
</div>
    <button>generate new element</button>

CSS

h3:hover{
   cursor:pointer;
}

h3{
    border: 1px solid #ccc;
    margin: 0 auto;
}

p{
    display:none;
}

JavaScript

var counter = 0;

$("button").click(function() {

$("<div class='child-list-workorder'>\
						    <div class='list-workorder'>\
						       <div class='list-workorder-header'>\
						         <h3 id='" + counter + "' class='list-workorder-id'>click me " + (++counter) + "</h3>\
						       </div>\
						       <p>" + counter + "</p>\
						    </div>\
						</div>").appendTo("div.parent-list-workorder");
    
    });


$("div.list-workorder-header").on("click", "h3.list-workorder-id", function(){
    alert(this.id);
});