title: add select box with row using JavaScript
body: <p>I want that in newly created all options of select box to be present and I want to do it javascript. But I cant figure out how to do when there are too many options</p>
  
  <pre><code>&lt;table id="newtable"&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;input name="name" type="text" id="name"/&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;select name="gender" id="gender"&gt;
                  &lt;option&gt;Male&lt;/option&gt;
                  &lt;option&gt;Female&lt;/option&gt;
              &lt;/select&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;input name="add_button" type="button" id="add_button" value="Add"/&gt;
          &lt;/td&gt;
      &lt;tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>var itemCount = 0;
  $(document).ready(function() {
      var objs = [];
      var temp_objs = [];
      $("#add_button").click(function() { 
          var html = "";
          var obj = {
              "name" :  $("#name").val(),
              "gender" :  $("#gender").val(),
          }  
          $("#name").val('');
          $("#gender").val(''),
          objs.push(obj);
          itemCount++;
          html = "&lt;tr&gt;" +
              "&lt;td&gt;&lt;INPUT type='text' name='txt1[]'  value='" + obj['name'] + "'/&gt;&lt;/td&gt;" + 
              "&lt;td&gt;&lt;select&gt;&lt;option&gt;" + obj['gender'] + "&lt;/select&gt;&lt;/option&gt;&lt;/td&gt;&lt;/tr&gt;";            
          $("#newtable").append(html);
      });
  });
  </code></pre>