Добавить несколько строк таблицы при нажатии кнопки

Есть ли смысл загружать файл вместо того, чтобы клонировать нужный вам элемент, тем более, что он уже есть в вашем DOM? Это, на мой взгляд, чище и проще в управлении.

Я думаю, что этот код ниже должен делать то же самое без необходимости загружать другой файл (с которым у меня были проблемы с перекрестным происхождением)

РЕДАКТИРОВАТЬ Теперь клонирует всю таблицу, а не только одну строку. Будьте осторожны с именами входов, так как они тоже клонированы.

<script src = "https://code.jquery.com/jquery-3.5.1.min.js" integrity = "sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0 = " crossorigin = "anonymous"></script>

<div class = "form_container">
    <form method = "POST" action = "actionPage.php">
        <div class = "table_container">
            <table id = "clone" border = "2">
                <tr>
                    <tr >
                        <td><label>Sr.No :</label></td>
                        <td><input type = "number" class = "SrNo" name = "SrNo" value = "1" readonly></td>
                        <td><label>Design number :</label></td>
                        <td><input type = "text" class = "designNo" name = "designNumber"></td>
                    </tr>
                    <tr>                
                        <td><label>Fabric quality :</label></td>
                        <td><select name = "fabricSelect">
                            <option value = "Fabric1" name = "fabric1">Fabric1</option>
                            <option value = "Fabric2" name = "fabric2">Fabric2</option>
                            <option value = "Fabric3" name = "fabric3">Fabric3</option>
                            <option value = "Fabric4" name = "fabric4">Fabric4</option>
                            </select>           
                        <td><label>Color matching :</label></td>
                        <td><input type = "select" class = "colorMatch" name = "colorMatch"></td>
                    </tr>
                    <tr>
                        <td><label>Quantity :</label></td>
                        <td><input type = "number" class = "quantity" name = "quantity"></td>
                        <td><label>Printing type :</label></td>
                        <td><select name = "printSelect">
                            <option value = "Print1">Print1</option>
                            <option value = "Print2">Print2</option>
                            <option value = "Print3">Print3</option>
                            <option value = "Print4">Print4</option>
                            </select>
                        </td>           
                    </tr>
                    <tr>
                        <td ><label>Rate :</label></td>
                        <td colspan = "2"><input type = "number" name = "rate"></td>
                    </tr>
                    <tr class = "newForm">
                    </tr>
                </tr>
            </table>
            
        </div>
        <input type = "submit" id = "submit_btn" class = "class_btn">
    </form>
    <button class = "addButton">Add more tab</button>
</div>

<script>
    $(document).ready(function() {
        var flag = 0;
        $(".addButton").click(function(e) {
            if (flag != 5) {
                flag += 1;
                var clone = $("#clone").clone();
                clone.find("input[name=SrNo]").val(flag+1);
                clone.appendTo($(".table_container"));
            }
            else {
                e.preventDefault();
            }
        });
    })
</script>