JSFiddle - React, Tailwind, and code Playground

by synz izynz

HTML

<button class="addme" data-table="#tblElaun">add</button>
<br><br>
<table border="1" width="100%" id="tblElaun" >
    <tr>
        <td align='center' width='7%'><b>BIL</b></td>
        <td align='center' width='17%'><b>NO K.P</b></td>
        <td align='center' width='45%'><b>NAMA</b></td>
        <td align='center' width='20%'><b>AMAUN</b></td>
        <td align='center' width='10%'><b>TINDAKAN</b></td>
    </tr> 
    <tr class="clonethis">
        <td><div class="num_row">1</div></td>
        <td></td>
        <td></td>
        <td align='center'><input type='text' size='25'  class="count_this" name='txtJumlah[]'/> 
        </td>
        <td>
            <button class="delme" style="display:none;width:100%">del</button>
        </td>
    </tr>
    <tr >
        <td colspan="3" align="right">Jumlah&nbsp;:&nbsp;</td>
        <td><div class="count_me"></div></td>
        <td></td>
    </tr>
    
        </table>
    <br>
        Total :

JavaScript

(function($){
    
    $.fn.myfunction = function(){
        var z = $(this).data('table');
        numrow = $('tr.clonethis').size();
        if(numrow >= 1)
            $(z).find('.delme').show();
        var clonethis = $(z+" tr.clonethis:last").clone();
        
        $(z+" tr.clonethis:last").after(clonethis);
        $(z+" tr.clonethis:last").find("input").val("");
        $(z+" tr.clonethis:last").find('.num_row').text(numrow+1);          
    };
      
    $.fn.mydel = function(yy){
        var x = $(this);
		var thisTableId = x.parents("table").attr("id");
        var numrow = $('#'+thisTableId + " tr.clonethis").size();
        x.closest('tr').fadeOut('fast',function() {
            $(this).remove();
            i= 0;
            
			while(i<numrow){
                $('#'+thisTableId + " tr.clonethis:eq("+i+")").find('.num_row').text(i+=1);
               // i += 1;
            }
                
            if(i == 2)
                $('#'+thisTableId).find('.delme').hide();
            
            yy();
        });
        
       // yy();
       // alert($.test);
        return this;
    };
    
    $.fn.countthis = function(z){
        total  = 0;
        
        $("[name='txtJumlah[]']").each(function(){
            total += Number($(this).val());
        });
        $(".count_me").html(total);
        return this;
    };
    
    $(document).on('click','.delme',function(){    
        $(this).mydel(function(){
            $().countthis();
        });
    });
    
    $(document).on('click','.addme',function(){
        $(this).myfunction();
    });
    
    $(document).on('change','.count_this',function(){
        $().countthis();
    });
    
})(jQuery);