title: how to dynamically load dropdownlist based on selection of a previous list with multiple lines
body: <p>Hi there I've been trying to figure this one out.  I have 6 fields. Style, Color, Size, Description, SKU and Unit Price. I'm trying to get it so when you choose style from a dropdownlist the color dropdownlist then filters throught the database and displays the colors based on the style, the size then filters based on the selection of the color after which the Description SKU and UnitPrice will autofill from the database based on the previous selections.</p>
  
  <p>The Form i have can also add additional rows which also has dropdown lists that need to adjust based on selection.</p>
  
  <p>I mainly work in php have not really used javascript jquery or ajax much. some direction will be greatly appreciated. </p>
  
  <p>My HTML/PHP 
       </p>
  
  <pre><code>                                &lt;/tr&gt;
                                &lt;/thead&gt;
                                &lt;tbody&gt;
                                   &lt;tr&gt;
                                    &lt;td&gt;
                                      &lt;input class="form-control abit-more-room input-sm qty test" type="text" id="invoice-qty[]" name="qty[]" onChange="change()" &gt;
                                    &lt;/td&gt;
                                    &lt;?php 
                                    $style = "Select Style From Prods";
                                     try 
  {
      $smt = $db-&gt;prepare($style); 
      $smt-&gt;execute(); 
  } 
  catch(PDOException $ex) 
  { 
      die("Failed to run query: "); 
  }
  $data = $smt-&gt;fetchAll(); 
                                    ?&gt;
                                    &lt;td&gt;
                                      &lt;select class="form-control abit-more-room input-sm" type="text" id="style[]" name="style[]"&gt; 
                                      &lt;?php foreach ($data as $rowb): ?&gt;
                                      &lt;option value="&lt;?php echo $rowb['Style'];?&gt;"&gt; &lt;?php echo $rowb['Style'];?&gt; &lt;/option&gt;
                                      &lt;?php endforeach ?&gt;
                                      &lt;/select&gt;
                                    &lt;/td&gt;
                                    &lt;td&gt;
                                       &lt;select class="form-control abit-more-room input-sm" type="text" id="colour[]" name="colour[]"&gt; &lt;option value=""&gt; &lt;/option&gt;
                                    &lt;/td&gt;
                                    &lt;td&gt;
                                      &lt;select class="form-control abit-more-room input-sm" type="text" id="size[]" name="size[]"&gt; &lt;option value="" &lt;/option&gt;
                                    &lt;/td&gt;
                                    &lt;td&gt;
                                      &lt;input class="form-control abit-more-room input-sm" type="text" id="invoice-description[]" name="description[]"&gt;
                                    &lt;/td&gt;
                                    &lt;td&gt;
                                      &lt;input class="form-control abit-more-room input-sm" type="text" id="invoice-sku[]" name="sku[]"&gt;
                                    &lt;/td&gt;
                                    &lt;td&gt;
                                      &lt;input class="form-control abit-more-room text-center input-sm amount" type="text" id="invoice-unit[]" name="unit[]" &gt;
                                    &lt;/td&gt;
                                    &lt;td&gt;
                                      &lt;input class="form-control abit-more-room text-center input-sm balance" type="text" id="amount[]" name="amount[]"&gt;
                                      &lt;/td&gt;
                                    &lt;td&gt;
                                      &lt;input class="form-control abit-more-room text-center input-sm" type="text" id="invoice-itemtype[]" name="itemtype[]"&gt;
                                    &lt;/td&gt;
                                    &lt;td&gt;
                                      &lt;input class="form-control abit-more-room text-center input-sm" type="text" id="invoice-inventorytype[]" name="inventorytype[]"&gt;
                                    &lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;/tbody&gt;
                              &lt;/table&gt;
  
  
                              &lt;div class="row"&gt;
                                &lt;div class="col-sm-12 text-right"&gt;
                                  &lt;button class="btn btn-sm btn-primary push-15-t push-20" type="button" id="addRow"&gt;&lt;i class="icon fa fa-arrow-up push-5-r"&gt;&lt;/i&gt; Add an Item&lt;/button&gt;
                                  &lt;div class="col-sm-1 text-right"&gt;
                                  &lt;button onClick="calculate()" type="button" class="btn btn-sm btn-success push-15-t push-20" &gt;&lt;i class="icon fa fa-save push-5-r"&gt;&lt;/i&gt; calculate&lt;/button&gt;
  </code></pre>
  
  <p>My Javascript that adds rows </p>
  
  <pre><code>$(document).ready(function() {
            $('#addRow').on( 'click', function () {
                var table = document.getElementById("line-items");
                var lastRow = table.rows.length;
  
                //add new row with 12 empty cels
                var row = table.insertRow(-1);
  
                var cell1 = row.insertCell(0);
                var cell2 = row.insertCell(1);
                var cell3 = row.insertCell(2);
                var cell4 = row.insertCell(3);
                var cell5 = row.insertCell(4);
                var cell6 = row.insertCell(5);
                var cell7 = row.insertCell(6);
                var cell8 = row.insertCell(7);
                var cell9 = row.insertCell(8);
                var cell10 = row.insertCell(9);
  
                // Populate New Qty Cel **NOTE: MAKE SURE THERE ARE NO LINE BREAKS IN THE CODE (ALL ON 1 LINE!)
                cell1.innerHTML = "&lt;input class='form-control abit-more-room input-sm qty' type='text' id='qty[]' name='qty[]'&gt;";
  
                // Populate New Style Cel **NOTE: MAKE SURE THERE ARE NO LINE BREAKS IN THE CODE (ALL ON 1 LINE!)
                cell2.innerHTML = "&lt;select class='form-control abit-more-room input-sm' type='text' id='style[]' name='style[]'&gt; &lt;option value=''&gt; &lt;/option&gt; &lt;/select&gt;";
  
                // Populate New Colour Cel **NOTE: MAKE SURE THERE ARE NO LINE BREAKS IN THE CODE (ALL ON 1 LINE!)
                cell3.innerHTML = "&lt;select class='form-control abit-more-room input-sm' type='text' id='colour[]' name='colour[]'&gt; &lt;option value=''&gt; &lt;/option&gt; &lt;/select&gt;";
  
                // Populate New Size Cel **NOTE: MAKE SURE THERE ARE NO LINE BREAKS IN THE CODE (ALL ON 1 LINE!)
                cell4.innerHTML = "&lt;select class='form-control abit-more-room input-sm' type='text' id='size[]' name='size[]'&gt; &lt;option value=''&gt; &lt;/option&gt; &lt;/select&gt;";
  
                // Populate New Description Cel **NOTE: MAKE SURE THERE ARE NO LINE BREAKS IN THE CODE (ALL ON 1 LINE!)
                cell5.innerHTML = "&lt;input class='form-control abit-more-room input-sm' type='text' id='description[]' name='description[]'&gt;";
  
                // Populate New Sku Cel **NOTE: MAKE SURE THERE ARE NO LINE BREAKS IN THE CODE (ALL ON 1 LINE!)
                cell6.innerHTML = "&lt;input class='form-control abit-more-room input-sm' type='text' id='sku[]' name='sku[]'&gt;";
  
                // Populate New unit Cel **NOTE: MAKE SURE THERE ARE NO LINE BREAKS IN THE CODE (ALL ON 1 LINE!)
                cell7.innerHTML = "&lt;input class='form-control abit-more-room text-center input-sm amount' type='text' id='unit[]' name='unit[]'&gt;";
  
                // Populate New Amount Cel **NOTE: MAKE SURE THERE ARE NO LINE BREAKS IN THE CODE (ALL ON 1 LINE!)
                cell8.innerHTML = "&lt;input class='form-control abit-more-room text-center input-sm balance' type='text' id='amount[]' name='amount[]'&gt;";
  
                // Populate New Type Cel **NOTE: MAKE SURE THERE ARE NO LINE BREAKS IN THE CODE (ALL ON 1 LINE!)
                cell9.innerHTML = "&lt;select class='form-control abit-more-room text-center input-sm' id='itemtype[]' name='itemtype[]'&gt; &lt;option value='1'&gt; Product &lt;/option&gt;  &lt;option value='2'&gt; Work Order &lt;/option&gt; &lt;option value='3'&gt; Other Items &lt;/option&gt; &lt;/select&gt;  "; 
  
  
                // Populate New Total Cel **NOTE: MAKE SURE THERE ARE NO LINE BREAKS IN THE CODE (ALL ON 1 LINE!)
                cell10.innerHTML = "&lt;select class='form-control abit-more-room text-center input-sm' id='inventorytype[]' name='inventorytype[]'&gt; &lt;option value='1'&gt; Regular &lt;/option&gt; &lt;option value='2'&gt; Sample &lt;/option&gt; &lt;option value='3'&gt; Warehouse &lt;/option&gt; &lt;/select&gt;";
  
  
              });
            });
  </code></pre>
  
  <p>I mainly work in php have not really used javascript jquery or ajax much. some direction will be greatly appreciated. </p>