JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test"> <span>
    <label>File Type:
        <select class="book_type">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </label>
    <label>Book ID
        <input type="text" class="book_id" name="book_id" />
    </label>
    <label>Tray Number:&nbsp;
        <input type="text" name="tray_number" required class="tray_nu" placeholder="Required" value="" />
    </label>
    <label>Comments:
        <input type="text" name="comments" class="comments" value="" />
        <input type="button" class="delBttn" name="delBttn" disabled value="X" />
    </label>
    </span>
</div>
<div id="new_section"></div>
<input type="button" id="addbutton" value="Add Another Book" />

JavaScript

$(document).ready(function () {
    $("#addbutton").click(function () {
        var clone = $(".test").clone(true).insertBefore("#new_section:last");
        clone.attr('class', 'testnew');
        clone.find('[class*="delBttn"]').attr('disabled', false);
        clone.find('[class*="book_type"]').val('');
        clone.find('[class*="comments"]').val('');
    });

    $(".delBttn").click(function (e) {
        $(this).closest("span").remove();
        e.preventDefault();
    });
    $(".book_type").change(function () {
        var book_type = $(this).val();
        if (book_type === '2') {
            $(this).closest('span').find(".tray_nu").val('2');
        }
    });

}); //end of DOM