Jquery not looping inside parent loop

Question

I have a jquery code that clones a "selector" wherein it is a parent of many other elements.

EDIT : I added the function that calls the "cloneMore". It supposed to be called when the user clicks the button inside the row and creates another row below it.

EDIT 2 : I added the table that the <tr> belongs to. I tried to run it without the <tr> <td> tags and the function works! But sadly it removes it from the html table. Why does this happen?

jquery snippet

$(document).on('click', '.add-form-row', function(e){
        alert("Button Click!");
        e.preventDefault();
        cloneMore('.form-row.spacer:last', 'form');
        return false;

function cloneMore(selector, prefix) {
        var newElement = $(selector).clone(true);

        newElement.find('input[type=text]').each(function() { //loops through the textfields
            console.log("print1");
        });
        
        newElement.each(function () {
            console.log("print2");
        });

html code

    <div class="display_table">
    <table class="table table-hover table-striped">
        <thead class="thead-dark">
            <tr class="tablerow">
                <th scope="col">Item</th>
                <th scope="col">Item Description</th>
                <th scope="col">Quantity</th>
                <th scope="col">Delete</th>
            </tr>
        </thead>
        <tbody>
            {{ formset.management_form }}
            {% for form in formset %}
            <div class="row form-row spacer">
                <tr scope="row">
                    <div class="input-group">
                        <td><input type="text" name="form-0-item" class="form-control" id="id_form-0-item" value="" readonly="readonly"></td>
                        <td><input type="text" name="form-0-description" class="form-control" id="id_form-0-description" value="" readonly="readonly"></td>
                        <td><input type="text" name="form-0-quantity" class="form-control" id="id_form-0-quantity" value="" readonly="readonly"></td>
                        <div class="input-group-append"><td><button class="btn btn-success add-form-row">+</button></td></div>
                    </div>
                </tr>
            </div>
            {% endfor %}
        </tbody>
    </table>
</div>

However, it doesn't even pass through the loop even once and I don't get a "print" in the console. I'm sure that there is a text field inside the parent. In this case its the div with class "row form-row spacer"

Is there something wrong with my syntax? I've seen somewhere where they get the parent through a selector but in my case I put it in a variable. Is there anything wrong or any work around this?

Answer 1

I think I kind of figured it out. I was trying to select the <input> tags even without referencing the <td> and <tr> tags. So jquery didn't know what I was trying to select. So after I made some changes in the whole table and the jquery script, it works just as I intended it would. However, any suggestions on how I could improve this code will be appreciated! I'm putting this up in case someone needs it.

Also, I forgot to credit to this Stack Overflow answer for the snippets.

html code

<table class="table table-hover table-striped" id="part_table">
        <thead class="thead-dark">
            <tr class="tablehead">
                <th scope="col">Item</th>
                <th scope="col">Item Description</th>
                <th scope="col">Quantity</th>
                <th scope="col">Delete</th>
            </tr>
        </thead>
        <tbody>
            {{ formset.management_form }}
            {% for form in formset %}
            <div class="row form-row">
                <tr class="tablerow">
                    <td><input type="text" name="form-0-item" class="form-control" id="id_form-0-item" value="" readonly="readonly"></td>
                    <td><input type="text" name="form-0-description" class="form-control" id="id_form-0-description" value="" readonly="readonly"></td>
                    <td><input type="text" name="form-0-quantity" class="form-control" id="id_form-0-quantity" value="" readonly="readonly"></td>
                    <td><button class="btn btn-success add-form-row">+</button></td>
                </tr>
            </div>
            {% endfor %}
        </tbody>
    </table>

jquery snippet

<script type="text/javascript">
    function cloneMore(prefix) { 
        var lastrowtbl = $('#part_table tr.tablerow:last').clone(true); 

        var total = $('#id_' + prefix + '-TOTAL_FORMS').val();
        var currentnum = total - 1

        lastrowtbl.find('input[type=text]').each(function (i, el) {
            console.log(this);
            var name = $(this).attr('name');
            if(name) {
                name = name.replace('-' + currentnum + '-', '-' + total + '-');
                var id = 'id_' + name;
                $(this).attr({'name' : name, 'id' : id}).val('').removeAttr('checked');
            }
        });

        total++;
        $('#id_' + prefix + '_TOTAL_FORMS').val(total);
        $('#part_table tr.tablerow:last').after(lastrowtbl);

        var conditionRow = $('#part_table tr.tablerow:not(:last)');
        conditionRow.find('.btn.add-form-row')
        .removeClass('btn-success').addClass('btn-danger')
        .removeClass('add-form-row').addClass('remove-form-row')
        .html('-');
        return false;
    }

    $(document).on('click', '.add-form-row', function(e){
        alert("Button Click!");
        e.preventDefault();
        cloneMore('form');
        return false;
    });
    
</script>