JSFiddle - React, Tailwind, and code Playground

HTML

<div id='left'>
    
</div>
<div id='right'>
    <button id='button1'>add another two buttons dynamically</button>
</div>

CSS

#left{
    background-color:red;
    height:100px;
    float:left;
    min-width:200px;
}
#right{
    background-color:blue;
    height:100px;
}

JavaScript

$('#left').on('click','button',function(evt){
    alert("button in left div clicked!\n even though the event handle was created before I existed!");
});
$('#button1').click(function(evt){
    $('#left').append('<br /><button>new button! click me!</button>');
    $('#right').append('<br /><button>new button! you can click, but it won\'t work!</button>');
    $(this).hide();
});