JSFiddle - React, Tailwind, and code Playground

HTML

<button id="btn1">CLICK 1</button>
<button id="btn2">CLICK 2</button>
<div id="show"></div>

JavaScript

product_id = []

removeProduct = function(item) {
    var n = product_id.indexOf(item);
    if(n >= 0)
        product_id.splice(n, 1);
       
    
}

$("#btn1").on('click', function () {
    $("#show").append("<div><button type='button' id='btn1x' class='close pull-right' aria-hidden='true'>&times;</button>" + "<pre>button 1</pre></div>");
    product_id.push("btn1");
});

$(document).on('click', 'button#btn1x', function () {
    $(this).parent().remove();
    removeProduct("btn1");
});


$("#btn2").on('click', function () {
    $("#show").append("<div><button type='button' id='btn2x' class='close pull-right' aria-hidden='true'>&times;</button>" + "<pre>button 2</pre></div>");
    product_id.push("btn2");
});

$(document).on('click', 'button#btn2x', function () {
    $(this).parent().remove();
    removeProduct("btn2");
});