title: Is there a way to increment JSON array key value through multiple arrays instead of starting over with each array?
body: <p>This is my first time using JSON so I'm not even sure if I'm asking this question correctly but hopefully you can understand what I'm getting at.</p>
  
  <p>I am using the following data that to populate a select option based on the selection made in the previous select:</p>
  
  <pre><code>        prods = {
          Cookware: ["- Select -", "Round French Oven", "Oval French Oven", "Braiser", "Skillet", "Fry Pan", "Grill Pan", "Saute Pan", "Saucepan", "Saucier", "Griddle", "Roaster", "Stockpot", "Speciality Cookware", "Other"],
          Bakeware: ["- Select -", "Covered Casserole", "Baking Dish", "Stoneware Gratin", "Speciality Bakeware", "Individual Bakeware", "Metal Bakeware", "Other"],
          KitchenTools: ["- Select -", "Utensils", "Kitchen Accessories", "Cutlery", "Wine Tools", "Textiles", "Other"],
          DineEntertain: ["- Select -", "Dinnerware", "Serveware", "Tabletop Accessories", "Glassware", "Kettles", "Tea Collection", "Café Collection", "Other"]
          };      
  </code></pre>
  
  <p>and here is the relevant jQuery I am using to do this:</p>
  
  <pre><code>                $.each(prods[catSelected], function (key, value) {
                      nextProdType
                          .append($("&lt;option&gt;&lt;/option&gt;")
                          .attr("value", key)
                          .attr("name", value)
                          .text(value));
                  }); 
  </code></pre>
  
  <p>In the resulting HTML, the key counter starts over for each array. So if Bakeware is selected:</p>
  
  <pre><code>            &lt;option value="0" name="- Select -"&gt;- Select -&lt;/option&gt;
              &lt;option value="1" name="Covered Casserole"&gt;Covered Casserole&lt;/option&gt;
              &lt;option value="2" name="Baking Dish"&gt;Baking Dish&lt;/option&gt;
              &lt;option value="3" name="Stoneware Gratin"&gt;Stoneware Gratin&lt;/option&gt;
  </code></pre>
  
  <p>or if Accessories is selected:</p>
  
  <pre><code>        &lt;option value="0" name="- Select -"&gt;- Select -&lt;/option&gt;
          &lt;option value="1" name="Utensils"&gt;Utensils&lt;/option&gt;
          &lt;option value="2" name="Kitchen Accessories"&gt;Kitchen Accessories&lt;/option&gt;
          &lt;option value="3" name="Cutlery"&gt;Cutlery&lt;/option&gt;
  </code></pre>
  
  <p>As you can see the value always starts at 0, and what I would like is for the first <code>- select -</code> value to be 0 and the last option in DineEntertain be 39.  This would allow me to store all these options in one table in the database without having duplicate numerical values.</p>
  
  <p>I am using this on a dynamic form where users can add or subtract categories, so the value has to be fixed. 
  Is there a way to do this?  I have tried searching for this in the forums here and in Google but not finding any solutions, which makes me think I may not be asking the right question...</p>