JSFiddle - React, Tailwind, and code Playground

HTML

<form class="the-form">
<span>
    <input type="checkbox" name="check[]">
        <button class="delete">X</button>
</span>
 <span>
    <input type="checkbox" name="check[]">
        <button class="delete">X</button>
</span>
 <span>
    <input type="checkbox" name="check[]">
        <button class="delete">X</button>
</span>

    <button class="add-more">Add More</button>
     <button type="submit">Submit</button>
</form>

CSS

.the-form span {
    display: block;
}

JavaScript

var input = '<span><input type="checkbox" name="check[]"><button class="delete">X</button></span>';

function reIndex() {
	var inputs = $('input[name^=check]');
    inputs.each(function (i, el) {
    	this.name = 'check[' + (i+1) + ']';
    });
}

$('.the-form').on('click', '.delete', function () {
    $(this).parent().remove();
    reIndex();
});

$('.add-more').on('click', function () {
    for(var i = 0; i < 3; i++) {
    	$('.the-form').find('span:last').after(input);
    }
    reIndex();
    return false;
});

$('.the-form').on('submit', function () {
    console.log( $(this).serializeArray() );
	return false;
});