JSFiddle - React, Tailwind, and code Playground

by mblase75

HTML

<form>
    <input type="button" id="my_button" value="Click Me!">
</form>
<div class="text">
    Click the green button above to add grey bars to the container below.
</div>
<div id="container">
    <div class="added_element" id="element1"></div>
</div>

<div class="text">
    Click one of the grey bars to get an alert of its ID name!
</div>

CSS

#my_button {
    width: 80px;
    height: 40px;
    background-color: #13A435;
    margin: 10px 20px;
}

#container {
    width: 300px;
    height: 100px;
    border: solid #000;
    overflow: hidden;
    margin: 10px;
}

.added_element {
    width: 20px;
    height: 100px;
    background-color: #777;
    margin: 0px 5px;
    float: left;        
}    

.text {
    width: 300px;
    height: 40px;
    margin: 0 10px;
}

JavaScript

var element_counter = 2;

$('#my_button').click(function() {
        
    $('#container').append('<div class="added_element" id="element' + element_counter +'"></div>');
    
    element_counter += 1;

});

$('#container').on('click','.added_element',function() {
    
    var id = $(this).attr('id');
    
    alert(id);
    
});