JSFiddle - React, Tailwind, and code Playground

Repeater field https://github.com/Rhyzz/repeatable-fields

by brasofilo

HTML

<script src="https://rawgit.com/Rhyzz/repeatable-fields/master/repeatable-fields.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<div class="repeat">
    <table id="the-table" class="wrapper" width="100%">
        <thead>
            <tr>
                <td class="w10" colspan="2"><span class="add"><img src="http://i.stack.imgur.com/NXQWY.png" class="icon-img" /></span>

                </td>
                <td class="w10" colspan="2"><span class="save"><img src="http://i.stack.imgur.com/NgmLj.png" class="icon-img" /></span>

                </td>
            </tr>
        </thead>
        <tbody class="container">
            <tr class="template row">
                <td class="w5"><span class="move"><img src="http://i.stack.imgur.com/DmPYx.png" class="icon-img" /></span>

                </td>
                <td class="w30">
                    <input type="text" placeholder="Menu name" name="a-name[]" />
                </td>
                <td class="w60">
                    <input type="text" placeholder="URL" name="an-url[]" />
                </td>
                <td class="w5 w5r"><span class="remove"><img src="http://i.stack.imgur.com/a8KLT.png" class="icon-img" /></span>

                </td>
            </tr>
        </tbody>
    </table>
</div>

CSS

body { margin-top:50px; background-color: #eee; }
#the-table { border-collapse: collapse; }
#the-table thead td:nth-of-type(2) { text-align: right; }
#the-table td, 
#the-table tr { background-color: #ccc; padding:0; margin:0; }
#the-table .w5 { width: 5%; }
#the-table .w5r { opacity: .3; }
#the-table .w10 { width: 10% }
#the-table .w30 { width: 30% }
#the-table .w60 { width: 65% }
#the-table img { padding: 9px; }
#the-table .move img {
    width: 100%;
    max-width: 24px;
    -webkit-filter: invert(100%);
    opacity: .5;
}
#the-table input {
    padding: 8px;
    font-size: 14px;
    margin: 5px;
    width: 90%
}

JavaScript

function after_add(e, v) {
    //alert(v.value)
}
$('.repeat').each(function () {
    $(this).repeatable_fields({
        wrapper: 'table',
        container: 'tbody',
        row: 'tr',
        cell: 'td',
        add: '.add',
        remove: '.remove',
        move: '.move',
        template: '.template',
        before_add: null,
        after_add: after_add,
        before_remove: null,
        after_remove: null,
        sortable_options: {
            placeholder: "template",
            //forcePlaceholderSize: true,
            opacity: 0.5
        },
    });
});
$('.add').click();
var _all = new Array();
$('.save').click(function (e) {
    //e.preventDefault();
    //console.log($("#the-form").serializeArray());
    $('#the-table tbody tr:gt(0)').each(function () {
        _all.push({
            'nome': $(this).find('td:nth-of-type(2) input').val(),
                'url': $(this).find('td:nth-of-type(3) input').val()
        });

    });
    console.log(_all);
});