JSFiddle - React, Tailwind, and code Playground

by dauruk0512

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<table class="table table-bordered table-hover" style="margin-top:50px;">
          <thead>
            <tr>
              <th width="2%"><input id="check_all" class="formcontrol" type="checkbox"/></th>
              <th width="15%">Kode Barang</th>
              <th width="15%">Nama Barang</th>
              <th width="8%">Stock Awal</th>
              <th width="15%">IMAE / S.N</th>
              <th width="15%">Harga</th>
              <th width="5%">Jumlah</th>
              <th width="15%">Total</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><input class="case" type="checkbox"/></td>
              <td>
              <input type="text" data-type="id_barang" name="itemNo[]" id="itemNo_1" class="form-control autocomplete_txt kodebarang" autocomplete="off">
              <input type="hidden"  name="kode[]" id="kode_1" value="<?php echo $id ?>">
              
            </td>
              <td><input type="text" data-type="nama_barang" name="itemName[]" id="itemName_1" class="form-control autocomplete_txt" autocomplete="off" readonly></td>
              
              <td><input type="text"  name="StockName[]" id="StockName_1" class="form-control autocomplete_txt stock" autocomplete="off" readonly></td>
              
              <td><input type="text"  name="imae[]" id="imae_1" class="form-control imae"></td>
              
              <td><input type="text" name="price[]" id="price_1" class="form-control changesNo" autocomplete="off" onKeyPress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;" pattern="^\d+(\.|\,)\d{2}$"></td>
              <td><input type="text" name="quantity[]" id="quantity_1" class="form-control changesNo quantity" autocomplete="off" onKeyPress="return IsNumeric(event);" ondrop="return...

JavaScript

//ini add row auto nya
var i=$('table tr').length;	
$(".addmore").on('click',function(){
	var kode = $("#kode_pembelian").val();
	$(".kode").val(kode);
	html = '<tr>';
	html += '<td><input class="case" type="checkbox"/></td>';
	html += '<td><input type="text" data-type="id_barang" name="itemNo[]" id="itemNo_'+i+'" class="form-control autocomplete_txt kodebarang" autocomplete="off"><input type="hidden"  name="kode[]" class="kode" value="'+kode+'"  > </td>';
	html += '<td><input type="text" data-type="nama_barang" name="itemName[]" id="itemName_'+i+'" class="form-control autocomplete_txt" autocomplete="off" readonly></td>';
	html += '<td><input type="text"  name="StockName[]" id="StockName_'+i+'" class="form-control autocomplete_txt stock" autocomplete="off" readonly></td>';
	html += '<td><input type="text"  name="imae[]" id="imae_'+i+'" class="form-control imae"  ></td>';
	html += '<td><input type="text" name="price[]" id="price_'+i+'" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
	html += '<td><input type="text" name="quantity[]" id="quantity_'+i+'" class="form-control changesNo quantity" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
	html += '<td><input type="text" name="total[]" id="total_'+i+'" class="form-control totalLinePrice" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;" readonly></td>';
	html += '</tr>';
	$('table').append(html);
	i++;
});

$(document).on('change','#check_all',function(){
	$('input[class=case]:checkbox').prop("checked", $(this).is(':checked'));
});

//deletes the selected table rows
$(".delete").on('click', function() {
	$('.case:checkbox:checked').parents("tr").remove();
	$('#check_all').prop("checked", false); 
	calculateTotal();
});


//autocomplete script
$(document).on('focus','.autocomplete_txt',function(){
	type =...