JSFiddle - React, Tailwind, and code Playground

HTML

<table class="standard">
			
				<thead>
				
				<tr>
						<td colspan="2">
							Start Input barcode / Product Name
						</td>
						<td colspan="4">
							<input type="text" size="90" value="" placeholder="Barcode / Product Name">
						</td>
						<td>
							<button class="tambah" id="button_id"><i class="icon-plus"></i> Add</button>
						</td>
				</tr>
				
					<tr>
						<td>
							No.
						</td>
						<td>
							Kode Barang
						</td>
						<td>
							Nama Barang
						</td>
						<td>
							Qty
						</td>
						<td>
							Harga
						</td>
						<td>
							Disc %
						</td>
						<td>
							Total
						</td>
					</tr>
				</thead>
				<tbody>
                    <!-- this row is add when i click the add button -->
                <tr>
						<td>
							1
						</td>
						<td>
                            <input type="text" value="" size="16" name="kd_barang1" id="kd_barang1" value="" placeholder="this is value from barcode / prudct name.">
						</td>
						<td>
							<input type="text" value="" size="55" name="nama_barang1" id="txtHint" readonly>
						</td>
						<td>
							<input type="text" value="" size="4" name="qty1" id="qty1">
						</td>
						<td>
							<input type="text" value="" size="8" name="harga_barang1" id="txtHint1"   class="left" disabled>
						</td>
						<td>
							<input type="text" value="" size="4" name="disc1" id="disc1" readonly>
						</td>
						<td>
							<input type="text" value="" size="15" name="sub_total1"  id="sub_total1" disabled class="left">
						</td>
					</tr>
                            <!--// end -->   
                    </tbody>
    </table>

CSS

/* Standard Tables */
table thead {
text-align:center;
background: none repeat scroll 0% 0% rgb(229, 229, 229);
}
table {
	font-size:12px;
  border-collapse: collapse;
  border-spacing: 0;
}
table td {
  vertical-align:top;
}

table.standard {
    border-collapse: collapse;
    border: 1px solid #ddd;
    width:740px;
}

table.standard td, table.standard th {
    border: 1px solid #ddd;
}

table.standard tr:nth-child(even) td {
    background-color: #fcfcfc;
}

table.standard th {
    font-size: 1.125em;
    line-height: 1.333333333;
    padding: 20px 10px 5px 10px;
    color: #777;
    font-weight: normal;
}

table.standard td {
    padding: 5px 10px;
    vertical-align: middle;
}

table.standard tr:nth-child(even) td.subr,
table.standard tr:nth-child(even) th.subr,
table.standard tr td.subr,
table.standard tr th.subr,
table.standard tr:nth-child(even) td.sub,
table.standard tr:nth-child(even) th.sub,
table.standard tr td.sub,
table.standard tr th.sub {
    background: none repeat scroll 0% 0% rgb(211, 220, 227);
}

table.standard td.subr,
table.standard th.subr {
    text-align: right;
}
table.standard tbody tr:nth-child(odd) {
    background: none repeat scroll 0% 0% rgb(211, 220, 227);
}

JavaScript

$('#button_id').on('click', function(e) {
    $.ajax({
        url : yourUrl,
        type : 'GET',
        dataType : 'json',
        success : function(data) {
            $('#table_id tbody').append("<tr><td>" + data.column1 + "</td><td>" + data.column2 + "</td><td>" + data.column3 + "</td></tr>");
        },
        error : function() {
            console.log('error');
        }
    });
});