JSFiddle - React, Tailwind, and code Playground

HTML

<div id="class-1" class="classes">
    <input type="text" id="name-class-1" />
    <input type="text" id="number-class-1" />
    <input type="text" id="book-class-1" />
</div>

<input type="button" id="add" value="add"/>

JavaScript

$("#add").click(function (e) {
    var amount = $('div.classes').length;
    var new_amount = amount + 1;
    var cloned_div = $('#class-' + amount);
    var $cloned = $(cloned_div).clone().attr('id', 'class-' + new_amount).insertAfter('#class-' + amount);
    
    $cloned.children().each(function(){
        var $child = $(this);
        var oldID = $child.attr('id');
        var newID = oldID.replace(/[0-9]+$/, new_amount); // replace just the number, leave the rest of the ID name in tact
        $child.attr('id', newID);
    })
});