<style>
        .list {
            font-family: sans-serif;
        }

        td {
            padding: 10px;
            border: solid 1px #eee;
        }

        input {
            border: solid 1px #ccc;
            border-radius: 5px;
            padding: 7px 14px;
            margin-bottom: 10px
        }

        input:focus {
            outline: none;
            border-color: #aaa;
        }

        tbody.list tr:first-child {
            display: none;
        }
    </style>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.2.0/list.min.js"></script>

    <button id="add">
        Add
    </button>
    <div id="users">

        <table>
            <!-- IMPORTANT, class="list" have to be at tbody -->
            <tbody class="list">
            <tr>
                <td style="display:none;"><input class="id" type="hidden"></td>
                <td><input class="name"></td>
                <td><input class="born"></td>
            </tr>
            </tbody>
        </table>
    </div>

    <script>
        $(document).ready(function () {
            var options = {
                valueNames: [
                    {attr: 'value', name: 'id'},
                    {attr: 'value', name: 'name'},
                    {attr: 'value', name: 'born'},
                ]
            };

            var userList = new List('users', options);

            $("#add").on("click", function () {
                userList.add({
                    id: Math.floor(Math.random() * 9) + 1,
                    name: "Gustaf Lindqvist",
                    born: 1983,
                    count: 1,
                });
            });
        });
    </script>