title: Jquery not looping inside parent loop
body: <p>I have a jquery code that clones a &quot;selector&quot; wherein it is a parent of many other elements.</p>
  <p><strong>EDIT</strong> : I added the function that calls the &quot;cloneMore&quot;. It supposed to be called when the user clicks the button inside the row and creates another row below it.</p>
  <p><strong>EDIT 2</strong> : I added the table that the <code>&lt;tr&gt;</code> belongs to. I tried to run it without the <code>&lt;tr&gt; &lt;td&gt;</code> tags and the function works! But sadly it removes it from the html table. Why does this happen?</p>
  <p><strong>jquery snippet</strong></p>
  <pre><code>$(document).on('click', '.add-form-row', function(e){
          alert(&quot;Button Click!&quot;);
          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(&quot;print1&quot;);
          });
          
          newElement.each(function () {
              console.log(&quot;print2&quot;);
          });
  </code></pre>
  <p><strong>html code</strong></p>
  <pre><code>    &lt;div class=&quot;display_table&quot;&gt;
      &lt;table class=&quot;table table-hover table-striped&quot;&gt;
          &lt;thead class=&quot;thead-dark&quot;&gt;
              &lt;tr class=&quot;tablerow&quot;&gt;
                  &lt;th scope=&quot;col&quot;&gt;Item&lt;/th&gt;
                  &lt;th scope=&quot;col&quot;&gt;Item Description&lt;/th&gt;
                  &lt;th scope=&quot;col&quot;&gt;Quantity&lt;/th&gt;
                  &lt;th scope=&quot;col&quot;&gt;Delete&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              {{ formset.management_form }}
              {% for form in formset %}
              &lt;div class=&quot;row form-row spacer&quot;&gt;
                  &lt;tr scope=&quot;row&quot;&gt;
                      &lt;div class=&quot;input-group&quot;&gt;
                          &lt;td&gt;&lt;input type=&quot;text&quot; name=&quot;form-0-item&quot; class=&quot;form-control&quot; id=&quot;id_form-0-item&quot; value=&quot;&quot; readonly=&quot;readonly&quot;&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;input type=&quot;text&quot; name=&quot;form-0-description&quot; class=&quot;form-control&quot; id=&quot;id_form-0-description&quot; value=&quot;&quot; readonly=&quot;readonly&quot;&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;input type=&quot;text&quot; name=&quot;form-0-quantity&quot; class=&quot;form-control&quot; id=&quot;id_form-0-quantity&quot; value=&quot;&quot; readonly=&quot;readonly&quot;&gt;&lt;/td&gt;
                          &lt;div class=&quot;input-group-append&quot;&gt;&lt;td&gt;&lt;button class=&quot;btn btn-success add-form-row&quot;&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/tr&gt;
              &lt;/div&gt;
              {% endfor %}
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  <p>However, it doesn't even pass through the loop even once and I don't get a &quot;print&quot; in the console. I'm sure that there is a text field inside the parent. In this case its the div with class &quot;row form-row spacer&quot;</p>
  <p>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?</p>