JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<form action="grading.php" method="post">               
    <table width="100%" id="tableRealizzazione">
        <tr>
            <th></th>
            <th style="padding:12px;text-align:center;">Serial No</th>
            <th style="padding:12px;text-align:center;">Personale</th>
            <th style="padding:12px;text-align:center;">Percentage</th>
            <th style="padding:12px;text-align:center;">Marketing point</th>
            <th style="padding:12px;text-align:center;">Add/Remove</th>
        </tr>
        
        <tr class="even">
            <td></td>
            <td>
                <input type="text" name="serial[]"  class="add increment" value="1">
            </td>
            <td style="padding:12px;">
                <input type="text" value="" name="Personale[]">
            </td>
            <td style="padding:12px;">
                <input type="text" name="from[]" size="5%"> -
                <input type="text" name="to[]" size="5%"> %
            </td>
            <td style="padding:12px;">
                <input type="text" class="totaliCostiGestione" name="marketpt[]">
            </td>
            <td style="padding:12px;">
                <input type="text" name="programid[]" class="add" value="34" size="10%">
            </td>
            <td style="padding:12px;">
                <input type="button" class="addnew add" value="+" />
            </td> 
        </tr>
        <tr>
            <td>
                <input type="submit" name="submit" value="submit">
            </td>
        </tr>                     
    </table>
</form>

JavaScript

$('.addnew').live('click', function(){
    var thisRow = $(this).parent().parent();
    newRow = thisRow.clone(true).insertAfter(thisRow);
    newRow.find('input:not(.add)').val("");
    
    $(this).removeClass('addnew').addClass('remove');
    $(this).val("-");
    newRow.find('input.increment').val(parseInt(thisRow.find('input.increment').val())+1);
});
    
$('.remove').live('click', function(){
    $(this).parent().parent().remove();
});