title: jQuery Target Counting Class (Ex. $('.class0') ..... $('.class1');.....$('.class2');.... ect
body: <p>I'm having an issue with a shopping cart system that was poorly designed. It adds a class to the row with the shopping cart details. However it counts with the number of items in the cart, and they did not add a separate class for styling.</p>
  
  <p>It works similar to this</p>
  
  <pre><code>&lt;tr class="proddetails0"&gt;&lt;td&gt;Product 0&lt;/td&gt;&lt;/tr&gt;
  
  &lt;tr class="proddetails1"&gt;&lt;td&gt;Product 1&lt;/td&gt;&lt;/tr&gt;
  
  &lt;tr class="proddetails2"&gt;&lt;td&gt;Product 2&lt;/td&gt;&lt;/tr&gt;
  </code></pre>
  
  <p>Below is an exacty snip of the mess this thing is! I need to target these table rows so i can clone and replace them for a mobile layout solution. It wasn't built mobile first so i'm stuck with the task of integrating bootstrap! </p>
  
  <p>YOUR HELP IS MUCH APPRECIATED. Also, does anyone know a js plugin that will replace a table with a BS table layout? That would be hugely helpful! </p>
  
  <pre><code>&lt;tr valign="top" class="ShoppingCartRow0" style="height: 50px;"&gt;
  &lt;td align="center"&gt; 
  
  &lt;label for="quantity_0" class="aural-only"&gt;Quantity &lt;/label&gt;
  &lt;input type="text" size="2" maxlength="3" value="15" name="quantity_0_1061" id="quantity_0" onkeypress="return submitEnter(document.getElementById('UPDATE_CART'),event);" class="form-control"&gt;
  &lt;div&gt;&lt;input type="submit" class="btn-convio" name="remove_0_1061" id="remove_0_1061" value="Remove"&gt;&lt;/div&gt;
  &lt;/td&gt;
  &lt;td&gt;    
  
  &lt;h5&gt;&lt;span class="CartItemName"&gt;Desert&lt;/span&gt;&lt;/h5&gt;
  ($25.00 each)
  &lt;div&gt;
  &lt;table class="CartItemConfig" cellpadding="2"&gt;
  
  &lt;tbody&gt;&lt;tr valign="top" style="height: 50px;"&gt;
  &lt;td width="40%" align="right" style="padding-right: 15px;"&gt;&lt;u&gt;&lt;span class="CartItemConfigLabel"&gt;Pickup Location&lt;/span&gt;&lt;/u&gt;&lt;/td&gt;
  &lt;td align="left" style="background-color: rgb(243, 243, 241); border-radius: 5px; padding: 5px;"&gt;&lt;span class="CartItemConfigValue"&gt;2 p.m.  5 p.m. Tuesday, Dallas&lt;/span&gt;&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;/tbody&gt;&lt;/table&gt;
  &lt;/div&gt;
  
  
  &lt;div&gt;&lt;a class="Smaller" href="site/Ecommerce/1986741958?EDIT_ITEM=true&amp;amp;item=item_0_1061&amp;amp;store_id=1241#ConfigForm"&gt;Edit this item&lt;/a&gt;&lt;/div&gt;
  
  &lt;/td&gt;
  &lt;td align="right"&gt;
  
  &lt;p&gt;$375.00&lt;/p&gt;
  
  &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>Would this be done using a for/each loop?</p>
  
  <p>Using "i" ?</p>
  
  <pre><code>&lt;div id="prod_row_hack" class="row hidden-lg"&gt;
   &lt;div id="append_prod_here" class="col-xs-11 col-centered"&gt;
  
  
   &lt;/div&gt;
  &lt;/div&gt;
  
  
  
  &lt;script&gt;
  
  var myClass = "ShoppingCartRow";
  var finalclass = myClass + (i++) __________ ( Note**, However many times it's found )
  
  foreach {
  $('append_prod_here').append('&lt;div class="row"&gt;' + finalclass clone + '&lt;/div&gt;');
  }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Am i stretching the boundaries of jQuery?</p>
  
  <p>P.S. Bonus points if you can guess the name of this Sh*T system i'm forced to use</p>
  
  <p>Thanks again!</p>