JSFiddle - React, Tailwind, and code Playground

by GMK Hussain

HTML

<button class="add">Add</button>

<div id="test">
    <span id="textBox_1">Text 1</span>
    <span id="textBox_2">Text 2</span>
    <span id="textBox_3">Text 3</span>
</div>

CSS

.textBox {
    display: block;
}

#test span{
    border:1px solid #eee;
    padding:10px;
    display: block;
}

JavaScript

//var myId = $("#test span:last-child").attr("id");
//alert($('#test span:last-child').attr('id'));

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

$('#test').each(function() {
    var objCount = $('> span', this).filter(function() {
        return $(this).children('#test').length == 0;
    }).length;
   // alert(liCount);
objCount = objCount + 1; 
$('#test').append('<span class="textBox' + objCount + '">TESTING ' + objCount + ' </span>' )

});

});
//objCount