JSFiddle - React, Tailwind, and code Playground

by Gurunathan A

HTML

<form id="cat">

<table>
<tr id="tr_last"></tr>
</table>
<input type="button" id="text_add_rows"  class="send" value="add"/>
<input type="button" id="submitbutton" value="submit" class="send" />

</form>

CSS

.send
{
width:100px;
height:30px;
}

JavaScript

$(function()
{
var kit_rows = 0;
var btn_add_rows_i = 1;
var btn_add_rows_x = '';

$("#submitbutton").click(function (){
alert($('#cat').serialize());
});
$('#text_add_rows').click(function() {

kit_rows += 1;

btn_add_rows_x += "<tr>";
    btn_add_rows_x += "<td class='main'> Model #: ";
    btn_add_rows_x += "<input type='text' name='kit_model" + btn_add_rows_i + "' id='kit_model" + btn_add_rows_i + "' class='kit_model'> &nbsp; </td>";

    btn_add_rows_x += "<td class='main'> Qty: ";
    btn_add_rows_x += "<input type='text' name='kit_qty" + btn_add_rows_i + "' id='kit_qty" + btn_add_rows_i + "' class='kit_info kit_qty'> &nbsp; </td>";

    btn_add_rows_x += "<td class='main'> Price: ";
    btn_add_rows_x += "<input type='text' name='kit_price" + btn_add_rows_i + "' id='kit_price" + btn_add_rows_i + "' class='kit_info kit_price' value='0.00'> &nbsp; </td>";

    btn_add_rows_x += "<td class='main'> Wholesale: ";
    btn_add_rows_x += "<input type='text' name='kit_wholesale" + btn_add_rows_i + "' id='kit_wholesale" + btn_add_rows_i + "' class='kit_info kit_wholesale' value='0.00'> &nbsp; </td>";
btn_add_rows_x += "</tr>";

$('#tr_last').before(btn_add_rows_x);
btn_add_rows_x = '';
btn_add_rows_i++;



});
});