JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
<ul>
    <li id="item1">item<span id="item-serial">1</span> <a class="rem" href="#">remove</a></li>
    <li id="template">item<span id="item-serial"></span> <a class="rem" href="#">remove</a></li>
</ul>
</div><a href="#" class="click">click</a>

CSS

#template{display:none;}

JavaScript

$('a.click').live('click', function() {
    
    var cloneElem = $('#main ul li#template');
    var lastElem = $('#main ul li:nth-last-child(2)');
    var lastId = lastElem.attr('id');
    var newId='';
    var serial='';
    if(lastId == null || lastId == '') {
        serial=1;
        newId = 'item'+serial;
    }
    else {
        serial = lastId.replace(/[^0-9.]/g, '');
        serial=parseInt(serial)+1;        
        newId = 'item' + serial;
    }
    $(cloneElem).clone().attr('id', newId).fadeIn(800).insertBefore('#main ul >li:last').find('#item-serial').append(serial)
    return false;
});

$('a.rem').live('click', function(e) {
   e.preventDefault();
    

    /*1. */  $(this).parent().fadeOut(1000, function(){$(this).remove();});
    /*2. */ //$(this).parent().remove();
    var childs = $("#main ul").children().length;
    var ac=childs-1;
    for(var i=1;i<=ac;i++){
        var id='perk'+i;
        $('#main ul li:nth-child('+i+')').attr('id', id).find('#item-serial').empty().append(i);
     
    }
    
 
    
});