JSFiddle - React, Tailwind, and code Playground

by oneboy

HTML

<div class='parent'>
     <div id='1' class='child'>1 - <span class='minus'>minus</span></div>
     <div id='2' class='child'>2 - <span class='minus'>minus</span></div>
     <div id='3' class='child'>3 - <span class='minus'>minus</span></div>
     <div id='4' class='child'>4 - <span class='minus'>minus</span></div>
     <div id='5' class='child'>5 - <span class='minus'>minus</span></div>
</div>

<div class='add-new'>add new</div>

JavaScript

$('.add-new').live('click',function(){
        
    var new_count = $('.child').length + 1;
           
    var new_blok = "<div id='"+new_count+"' class='child'>"+new_count+" - <span class='minus'>minus</span></div>";
    
    $('.parent').append(new_blok);
    
});

$('.minus').live('click',function(){
        
    $(this).parent().remove();
    
    var i = 1;
    
    $('.child').each(function(){
        
        $(this).attr('id', i)
        
        i++;        
                
    });     
   
    
});