JSFiddle - React, Tailwind, and code Playground

by Vaibhav Katole

HTML

<table class="table table-bordered" id="mytable">
    <thead>
        <tr>
            <th></th>
            <th class="col-sm-3">Item</th>
            <th class="col-sm-2">Item Name</th>
            <th class="col-sm-3">Description</th>
            <th class="col-sm-2">Unit Price</th>
            <th class="col-sm-2">Qty</th>
            <th class="col-sm-3">Line Total</th>
            <th class="col-sm-2">Stock Level</th>
        </tr>
    </thead>

    <tbody>
        <tr id='tableRow1' class='rows'>
            <td><input type="checkbox" class='chkbox'/></td>  
            <td><input class="form-control"  disabled class="data_input" disabled/></td>
            <td> <input type="text" class="form-control" class='inputPartNo' disabled></td>
            <td><textarea type='text' rows="4" cols="40" class="form-control" disabled /></textarea></td>
            <td> <input type="text" class="form-control" ></td>
            <td> <input   class="form-control" ></td>
            <td> <input  class="form-control" ></td>

            <td></td>
            <!--<td>  <span class="glyphicon glyphicon-ok" aria-hidden="true" style="margin:9px 0 0 12px;"></span></td>-->
        </tr>

            <tr id='tableRow2' class='rows'>
                <td><input type="checkbox" class='chkbox'/></td>
            <td><input class="form-control"  disabled class="data_input" disabled/></td>
            <td> <input type="text" class="form-control" class='inputPartNo'disabled ></td>
            <td><textarea type='text' rows="4" cols="40" class="form-control" disabled /></textarea></td>
            <td> <input type="text"  class="form-control" ></td>
            <td> <input type="text" class="form-control" ></td>
            <td> <input  class="form-control" ></td>
            <td></td>

               <!--                <td>  <span class="glyphicon glyphicon-remove" aria-hidden="false" style="margin:9px 0 0 12px;"></span></td>-->
        </tr>

         <tr id='tableRow2' class='rows'>
...

JavaScript

$("#add").click(function() 
    {
        var numRows = $('#getnumRows').val();
        alert(numRows);
        alert('triggered!');
        var selectlastRow=$('#mytable tbody>tr').eq(rowIndex);
        for (i=0; i < numRows; i++) 
            {                               
              $(selectlastRow).clone(true,true).insertAfter(selectlastRow);
              $(selectlastRow).addClass('rows');
              selectlastRow.find('td').children('select,input,textarea,input').val('');

            }
    });