JSFiddle - React, Tailwind, and code Playground

HTML

<div id="buttons"></div>
<button id="add">Add delete button</button>

CSS

#buttons {
    border: 1px solid red;
    padding: 10px;
}

JavaScript

var uniqID = 0;
$('#add').click(function() {
    var btnHTML = '<button class="delete_control" id="controlID_' + (++uniqID) + '">Delete</button>';
    $('#buttons').append(btnHTML);
});

    $('#buttons').delegate('.delete_control', 'click', function(e) {
        e.preventDefault();
        e.stopPropagation(); // maybe you don't need these 2, you can remove them if so
        
        if (confirm('Are you sure you want to delete that element?')) {
            alert('You should call the function to delete control: [' + e.target.id + ']');
        }
    });