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>';


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

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

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