JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<table id="example">
    <tr>
        <td>move</td>
        <td><input type="text" name="name" value="Item x"/></td>
        <td><input type="text" name="afdeling" value="Afdeling"/></td>
        <td><input type="text" name="locatie" value="Locatie"/></td>
        <td><a href="#" class="add">Add</a></td>
        <td><a href="#" class="remove">Remove</a></td>
        <td><a href="#" class="up">Up</a></td>
        <td><a href="#" class="down">Down</a></td>
    </tr>
</table>

<form action="" id="distributionList">
<table id="myTable">
    <thead>
        <tr>
            <th></th>
            <th>Lezer</th>
            <th>Afdeling</th>
            <th>Locatie</th>
            <th>Add</th>
            <th>Remove</th>
            <th>Up</th>
            <th>Down</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>move</td>
            <td><input type="text" name="name" value="Item 1"/></td>
            <td><input type="text" name="afdeling" value="Afdeling1"/></td>
            <td><input type="text" name="locatie" value="Locatie1"/></td>
            <td><a href="#" class="add" title="Delete this file">Add </a></td>
            <td><a href="#" class="remove">Remove</a></td>
            <td><a href="#" class="up">Up</a></td>
            <td><a href="#" class="down">Down</a></td>
        </tr>
        <tr>
            <td>move</td>
            <td><input type="text" name="name" value="Item 2"/></td>
            <td><input type="text" name="afdeling" value="Afdeling2"/></td>
            <td><input type="text" name="locatie" value="Locatie2"/></td>
            <td><a href="#" class="add" title="Delete this file">Add </a></td>
            <td><a href="#" class="remove">Remove</a></td>
            <td><a href="#" class="up">Up</a></td>
            <td><a href="#" class="down">Down</a></td>
        </tr>
    </tbody>
 </table>
<button type="submit">submit</button>
</form>

CSS

td,th{border:1px solid black;}
#example{display:none;}

JavaScript

$(document).ready(function(){   
    $(".add",this).live('click',function(){
        var addRow = $('#example tr:first').clone();
        $(this).closest('#myTable tr').after(addRow);  
    }); 
    $(".remove").live('click',function(){
        var removeRow = $(this).closest('tr');     
        $(removeRow).remove();    
        if($("#myTable tr").length <= 1){
            var addRow = $('#example tr:first').clone();
            $('#myTable').append(addRow);
        }
    }); 
    $(".up,.down").live('click',function(){
        var row = $(this).parents("tr:first");
        if ($(this).is(".up")) {
            row.insertBefore(row.prev());
        } else {
            row.insertAfter(row.next());
        }
    });  
    $("#myTable").sortable({
        items: 'tbody > tr',
        cursor: 'cursor',
        connectWith: '#myTable',
        axis: 'y',
        dropOnEmpty: true,
        receive: function(e, ui){
         $(this).find("tbody").append(ui.item);   
        }
    });
    
    $('form').submit(function() {
        alert($(this).serialize());
        return false;
    });
});