title: Adding <option> element to <select> along with id dynamically and use that added id
body: <p>I am working with 3 drop downs by selecting the first option in drop down1 the drop down2 gets filled with the options dynamically so far so good. But while selecting the option in the second drop down the problem occurs the third drop down not filling up.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  &lt;head&gt;
  &lt;script src="jq.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script&gt;
  
  $(document).ready(function() {
  
      $("#st").click(function() {
          $("#ds").html('&lt;option id="dsp"&gt;1&lt;/option&gt;&lt;option&gt;3&lt;/option&gt;&lt;option&gt;4&lt;/option&gt;');
      });
  
      $("#dsp").click(function() {
  
          $("#plc").html('&lt;option&gt;1&lt;/option&gt;&lt;option&gt;3&lt;/option&gt;&lt;option&gt;4&lt;/option&gt;');
          alert("hi");
      });
  
  
  });
  &lt;/script&gt;
  
  &lt;title&gt;TODO supply a title&lt;/title&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;select&gt;
      &lt;option id="st"&gt;1&lt;/option&gt;
      &lt;option&gt;2&lt;/option&gt;
      &lt;option&gt;3&lt;/option&gt;
      &lt;option&gt;4&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select id="ds"&gt;
  
  &lt;/select&gt;
  
  &lt;select id="plc"&gt;
  
  &lt;/select&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>