JSFiddle - React, Tailwind, and code Playground

HTML

<div id="output">
    <div class="item_lines">
        <input type="text" name="amount[]" id="amount_1" value="100" />
        <input type="text" name="type[]" id="type_1" value="abc" />
        <input type="checkbox" name="taxable[]" checked="checked" /> 
        <div id="remove_item_1"></div>

    </div>
</div>

<a href="#" id="new_line_add">clone_me</a>

JavaScript

$(document).ready(function () {

    $('[id^=remove_item]').click(function (evt) {
        evt.preventDefault();
        $(this).parents('.item_lines').remove();
    });

    var cur_num = 1;
    $('a#new_line_add').click(function (evt) {
        evt.preventDefault();
        var cloned = $('.item_lines').clone(true, true).get(0);
        ++cur_num;
        cloned.id = "item_" + cur_num;
        $(cloned).append()
        $(cloned).find("*").each(function (index, element) { // And all inner elements.
            if (element.id) {
                var matches = element.id.match(/(.+)_\d+/);
                if (matches && matches.length >= 2) { 
                    element.id = matches[1] + "_" + cur_num;
                }
            }
            element.value = ''; // clear all form values
            element.checked = true; // make all checkboxes true
        });
        $(cloned).appendTo($('#output'));
        $('#remove_item_' + cur_num).html('<a href="#" title="Remove" id="new_line_remove_1" role="button" class="btn">Remove' + cur_num + '</a>');
    });
});