JSFiddle - React, Tailwind, and code Playground

by synz izynz

HTML

<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">del</button>
        </td>
    </tr>
    
        </table>
    <br>
<button class="clickme">test</button>
        Total : <div class="count_me"></div>
<br>
    <table>
		<tr>
			<td>1</td>
            <td><input class="count_this" name="inp[]"/></td>
		</tr>
		<tr>
			<td>2</td>
            <td><input class="count_this" name="inp[]"/></td>
		</tr>
		<tr>
			<td>jumlah</td>
            <td><div class="count_all"></div></td>
		</tr>
	</table>

JavaScript

$(document).on('change',".count_this",function(){
    // $(".count_all").html('');
    total  = 0;
    
    $("[name='txtJumlah[]']").each(function(){
        total += Number($(this).val());
    });
    $(".count_all").html(total);
});

 
  (function($){
    $.fn.myfunction = function(z){
          numrow = $('tr.clonethis').size();
     //   alert(numrow);
    $("tr.clonethis:last").clone().hide().appendTo("#tblElaun");
    $("tr.clonethis:last").find("input").val("");
    $("tr.clonethis:last img").show();
    $("tr.clonethis:last").find("input[name='txtBulan[]']").val("0");
    $("tr.clonethis:last").fadeIn(1000).removeAttr('style');
    $("tr.clonethis:last").find('.num_row').text(numrow+1);          
    };
      
    $.fn.mydel = function(z){
		var thisTableId = $(this).parents("table").attr("id");
        var numrow = $('#'+thisTableId + " tr.clonethis").size();
        $(this).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;
            }
        });
    };
      
  })(jQuery);

$('.clickme').on('click',function(){
    $(this).myfunction();
});

$(document).on('click','.delme',function(){
    $(this).mydel();
   // alert(1);
});