title: My dynamic table row creation code doesn't work
body: <p>I want to create a dynamic table. This code was working fine for me until I had Text box instead of this combo box in "Recruitment stage " column </p>
  
  <p>I have used help of this code snippet <a href="http://bootsnipp.com/snippets/featured/dynamic-table-row-creation-and-deletion" rel="nofollow noreferrer">http://bootsnipp.com/snippets/featured/dynamic-table-row-creation-and-deletion</a></p>
  
  <p>So my problem is I can't add rows after changing above mentioned code snippet into below code.</p>
  
  <p>So please some one tell me why this isn't working?</p>
  
  <p>This is screenshot of my table <a href="https://scontent-b-sin.xx.fbcdn.net/hphotos-xap1/v/l/t1.0-9/p118x118/1920631_767832533264997_3927859617455363653_n.jpg?oh=11445485fb638f37534179b6ed2eaaf4&amp;oe=5509770D" rel="nofollow noreferrer">https://scontent-b-sin.xx.fbcdn.net/hphotos-xap1/v/l/t1.0-9/p118x118/1920631_767832533264997_3927859617455363653_n.jpg?oh=11445485fb638f37534179b6ed2eaaf4&amp;oe=5509770D</a></p>
  
  <p>Quick reply would be appreciated</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  $(document).ready(function(){
        var i=1;
       $("#add_row").click(function(){
        $('#addr'+i).html("&lt;td&gt;"+ (i+1) +"&lt;/td&gt;&lt;td&gt;
                            &lt;select name='course"+i+"' class='form-control'&gt;
                               &lt;option value=''&gt;Select&lt;/option&gt;
                               &lt;option value='1'&gt;Telephonic Interview&lt;/option&gt;
                               &lt;option value='2'&gt;Skype Interview&lt;/option&gt;
                               &lt;option value='3'&gt;Personal Interview&lt;/option&gt;
                            &lt;/select&gt;
                          &lt;/td&gt;&lt;td&gt;&lt;input  name='mail"+i+"' type='text' placeholder='Mail'  class='form-control input-md'&gt;&lt;/td&gt;&lt;td&gt;&lt;input  name='mobile"+i+"' type='text' placeholder='Mobile'  class='form-control input-md'&gt;&lt;/td&gt;");
  
        $('#tab_logic').append('&lt;tr id="addr'+(i+1)+'"&gt;&lt;/tr&gt;');
        i++; 
    });
       $("#delete_row").click(function(){
           if(i&gt;1){
           $("#addr"+(i-1)).html('');
           i--;
           }
       });
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div class="container"&gt;
      &lt;div class="row clearfix"&gt;
          &lt;div class="col-md-12 column"&gt;
              &lt;table class="table table-bordered table-hover" id="tab_logic"&gt;
                  &lt;thead&gt;
                      &lt;tr &gt;
                          &lt;th class="text-center"&gt;
                              #
                          &lt;/th&gt;
                          &lt;th class="text-center"&gt;
                              Recruitment Stage
                          &lt;/th&gt;
                          &lt;th class="text-center"&gt;
                              Remark
                          &lt;/th&gt;
                          &lt;th class="text-center"&gt;
                              Comments
                          &lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                      &lt;tr id='addr0'&gt;
                          &lt;td&gt;
                          1
                          &lt;/td&gt;
                          &lt;td&gt;
                            &lt;select name="course0" class="form-control"&gt;
                               &lt;option value=""&gt;Select&lt;/option&gt;
                               &lt;option value="1"&gt;Telephonic Interview&lt;/option&gt;
                               &lt;option value="2"&gt;Skype Interview&lt;/option&gt;
                               &lt;option value="3"&gt;Personal Interview&lt;/option&gt;
                            &lt;/select&gt;
                          &lt;/td&gt;
                          &lt;td&gt;
                          &lt;input type="text" name='mail0' placeholder='Mail' class="form-control"/&gt;
                          &lt;/td&gt;
                          &lt;td&gt;
                          &lt;input type="text" name='mobile0' placeholder='Mobile' class="form-control"/&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr id='addr1'&gt;&lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;a id="add_row" class="btn btn-default pull-left"&gt;Add Row&lt;/a&gt;&lt;a id='delete_row' class="pull-right btn btn-default"&gt;Delete Row&lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>