title: Select option value based on another select option in dynamic table
body: <p>I have a table that changes the number of rows</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
      &lt;title&gt;no Title&lt;/title&gt;
      &lt;script type="text/javascript"&gt;
          //what to do?
      &lt;/script&gt;
      &lt;/head&gt;
  &lt;body&gt;
  
      &lt;datalist&gt;
          //land
          //water
          //air
          //what to do?
      &lt;/datalist&gt;
  
  &lt;table id="animal"&gt;
      &lt;tr&gt;
          &lt;th&gt;Animal Category&lt;/th&gt;
          &lt;th&gt;Select Animal&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;select&gt;
                  &lt;option selected&gt;Please select&lt;/option&gt;
                  &lt;option value="land"&gt;Land&lt;/option&gt;
                  &lt;option value="air"&gt;Air&lt;/option&gt;
                  &lt;option value="water"&gt;Water&lt;/option&gt;
              &lt;/select&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;select&gt;
                  &lt;option selected&gt;Please select&lt;/option&gt;
                  //what to do?
              &lt;/select&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;select&gt;
                  &lt;option selected&gt;Please select&lt;/option&gt;
                  &lt;option value="land"&gt;Land&lt;/option&gt;
                  &lt;option value="air"&gt;Air&lt;/option&gt;
                  &lt;option value="water"&gt;Water&lt;/option&gt;
              &lt;/select&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;select&gt;
                  &lt;option selected&gt;Please select&lt;/option&gt;
                  //what to do?
              &lt;/select&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;script src="myProject/js/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Let's say there are currently 2 rows, then in each row, there is 'Select Animal' which can be selected according to the 'Animal Category' option.
  For example, I chose 'land' in 'Animal category' then what appears in 'Select Animal' is -> cat, dog, chicken</p>
  
  <p>For example I have 3 lists (land, air, water)</p>
  
  <pre><code>land -&gt; cat, dog, chicken, etc
  water -&gt; fish, octopus, shrimp, etc
  air -&gt; bird, etc
  </code></pre>
  
  <p>Every list I want to place in the datalist because it can change in number, I've download jquery library. where do I start ?</p>