title: Jquery Children
body: <p>I am trying to create a nice gallery for an e-commerce. - all the current code is <a href="https://gist.github.com/mmoscosa/c7ddb9e94e4a481d93b6" rel="nofollow noreferrer">here</a></p>
  
  <p>The front-end layout I got from <a href="http://tympanus.net/codrops/2014/03/27/3d-grid-effect/" rel="nofollow noreferrer">here</a> followed the tutorial and it worked like a charm.</p>
  
  <p>Then to add the payment module I decided to  add a floating div:</p>
  
  <pre><code>&lt;?php foreach ($tes as $te): ?&gt;
          &lt;div id="&lt;?php echo $te['Product']['id'] ?&gt;"&gt;
              &lt;div class="shop-actions"&gt;
                  &lt;div class="list-group"&gt;
                      &lt;span href="#" class="list-group-item active comprar-menu-button"&gt;
                          &lt;?php echo __('&lt;i class="fa fa-shopping-cart"&gt;&lt;/i&gt; Carrito de Compras'); ?&gt;
                      &lt;/span&gt;
                      &lt;span href="#" class="list-group-item comprar-menu"&gt;
                          &lt;h3&gt;Agregar al carrito&lt;/h3&gt;
                          &lt;?php echo $this-&gt;Form-&gt;create('Product', array('default' =&gt; false, 'inputDefaults' =&gt; array(
                                              'div' =&gt; 'form-group',
                                              'label' =&gt; false,
                                              'wrapInput' =&gt; false,
                                              'class' =&gt; 'form-control'))); ?&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-md-12"&gt;
                                  &lt;?php 
                                      echo $this-&gt;Form-&gt;input('cantidad', array(
                                                                              'options' =&gt; array(
                                                                                                  50 =&gt; "50gr",
                                                                                                  100 =&gt; "100gr",
                                                                                                  150 =&gt; "150gr",
                                                                                                  200 =&gt; "200gr",
                                                                                                  250 =&gt; "250gr",
                                                                                                  500 =&gt; "500gr",
                                                                                                  1000 =&gt; "1kg",
                                                                                                  'mayoreo' =&gt; "mayoreo",
                                                                                                 ),
                                                                              'empty' =&gt; '(Seleccionar)',
                                                                          ));
                                  ?&gt;
                              &lt;/div&gt;
                              &lt;div class="col-md-12 mayoreo"&gt;
                                  &lt;div class="input-group"&gt;
                                    &lt;?php echo $this-&gt;Form-&gt;input('mayoreo', array('label' =&gt; '', 'type'=&gt;'number')); ?&gt;
                                    &lt;span class="input-group-addon"&gt;KG&lt;/span&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="col-md-12 subtotal"&gt;
                                  &lt;div id="&lt;?php echo $te['Product']['price']; ?&gt;"&gt;&lt;span&gt;$0.00 MXN&lt;/span&gt; &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="col-md-12"&gt;
                                  &lt;/br&gt;
                                  &lt;?php   echo $this-&gt;Form-&gt;submit('Agregar', array('div' =&gt; 'form-group','class' =&gt; 'btn btn-info col-md-12')); ?&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;?php echo $this-&gt;Form-&gt;end(); ?&gt;
                          &lt;hr /&gt;
                          &lt;h4&gt;Ademas en tu carrito&lt;/h4&gt;
                          &lt;ul&gt;
                              &lt;li&gt;Lung Jing &lt;span class="pull-right"&gt;200gr&lt;/span&gt;&lt;/li&gt;
                              &lt;li&gt;Pu Erh &lt;span class="pull-right"&gt;1kg&lt;/span&gt;&lt;/li&gt;
                              &lt;li&gt;Lapsang Su shang &lt;span class="pull-right"&gt;10kg&lt;/span&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                          &lt;span class="pull-right"&gt;Subtotal: $2,500.00 MXN&lt;/span&gt;
                      &lt;/span&gt;
                  &lt;/div&gt;        
              &lt;/div&gt;
              […]
          &lt;/div&gt;
      &lt;?php endforeach; ?&gt;
      &lt;span class="loading"&gt;&lt;/span&gt;
      &lt;span class="icon close-content"&gt;&lt;i class="fa fa-times"&gt;&lt;/i&gt;&lt;/span&gt;
  </code></pre>
  
  <p>Then I tried to add some <strong>jQuery</strong> to make the UX nice and smooth… </p>
  
  <pre><code>    function formatCurrency(total) {
      var neg = false;
      if(total &lt; 0) {
          neg = true;
          total = Math.abs(total);
      }
      return (neg ? "-$" : '$') + parseFloat(total, 10).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString();
  }
  $('.comprar-menu-button').click(function(){
      $(this).next().slideToggle(function(){
          if ($(this).is(':visible')){
              $(this).css('display','inline-block');
          }
      });
  
  });
  $('.cantidad-te').change(function(){
      var value, product, precio, cantidadEspecial;
      value = $(this).val();
      product = $(this).parent().parent();
      precio = $(this).parent().parent().next().next().children();
      cantidadEspecial =product.next();
      if (value === 'mayoreo') {
          cantidadEspecial.show();
          precio.children().html('especifique cantidad');
      }else{
          cantidadEspecial.hide();
          subtotal = precio.attr('id') * value;
          precio.children().html(formatCurrency(subtotal) + ' MXN');
      }
  });
  </code></pre>
  
  <p>In theory it works, however it only works for the last element on my teas product.</p>
  
  <h2>Expected outcome</h2>
  
  <p>When clicking on any element it should: </p>
  
  <ul>
  <li>show the div with the shopping cart</li>
  <li>slideToggle should show the form to add product to shopping cart</li>
  <li>When selecting an element from dropdown it should:
  
  <ul>
  <li>update with correct price</li>
  </ul></li>
  </ul>
  
  <h2>Current outcome</h2>
  
  <ul>
  <li>Only slideToggle() works for last element on my grid.</li>
  <li>when changing values on dropdown list it does not make the changes specified.</li>
  </ul>
  
  <h2>Additional info</h2>
  
  <ul>
  <li>To see a live version of how the 3D grid works visit <a href="http://qihouse.mx/galeria" rel="nofollow noreferrer">here</a> (this is not the version am currently working with as I havent pushed the changes)</li>
  <li>The code for live version is <a href="https://github.com/mmoscosa/qihouse" rel="nofollow noreferrer">here</a></li>
  <li>Page Source (HTML Outcome) - <a href="https://gist.github.com/mmoscosa/4fe4b310ad8ce4308a74" rel="nofollow noreferrer">here</a> as pointed out by <a href="https://stackoverflow.com/questions/24347185/jquery-children#comment37642608_24347185">@AlexAtNet</a></li>
  </ul>
  
  <p>Thank you</p>