title: Jquery selector on Django loop
body: <p>So I have this</p>
  
  <pre><code>{% for producto in reparto_martes %}
         &lt;div class="col-md-3"&gt;
          &lt;div class="card mb-4 box-shadow product-box"&gt;
            &lt;img class="card-img-top product-photo" data-src="holder.js/100px225?theme=thumb&amp;amp;bg=55595c&amp;amp;fg=eceeef&amp;amp;text=Thumbnail" alt="Thumbnail [100%x225]" style="height: 225px; width: 100%; display: block;" src={{ producto.foto }} data-holder-rendered="true"&gt;
            &lt;div class="card-body"&gt;
              &lt;h4 class="card-text producto_precio"&gt;${{ producto.precio }}&lt;/h4&gt;
              &lt;h5 class="card-text producto_nombre"&gt;{{ producto.nombre }}&lt;/h5&gt;
              &lt;div class="d-flex justify-content-between align-items-center"&gt;
                &lt;button type="button" class="btn btn-success anadir_button"&gt;Añadir&lt;/button&gt;
                &lt;small class="text-muted"&gt;&lt;/small&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  {% endfor %}
  </code></pre>
  
  <p>It looks like this: <a href="https://gyazo.com/0b329d87af9372250a53ae25347b59b0" rel="nofollow noreferrer">https://gyazo.com/0b329d87af9372250a53ae25347b59b0</a></p>
  
  <p>I need to select the items name when the user clicks on the anadir_button. </p>
  
  <pre><code>$(document).ready(function(){
      $(".anadir_button").click(function(){
          $('.producto_precio').clone().appendTo('#list_pedidos');
      });
  });
  </code></pre>
  
  <p>^This one just selects all the three items (Bananas, bolson frutal, almendras)</p>
  
  <pre><code>$('.producto_precio').last()clone().appendTo('#list_pedidos');
  </code></pre>
  
  <p>^And this one just selects 'almendras'.</p>