title: BootstrapTable - dynamically add and delete row
body: <p>I'm using <a href="http://bootstrap-table.wenzhixin.net.cn/getting-started/" rel="nofollow noreferrer">BootstrapTable</a> plugin. I want to dynamically add and remove some rows. My problem is that every time when I add a new row, type some characters in inputs and then remove some of rows all data is lost..
  What I'm doing wrong? Example and fiddle at the bottom</p>
  
  <p><a href="http://jsfiddle.net/71na5kne/" rel="nofollow noreferrer">http://jsfiddle.net/71na5kne/</a></p>
  
  <p><strong>HTML Table</strong></p>
  
  <pre><code>&lt;div id="modal_toolbar_new" class="btn-group " &gt;
      &lt;button type="button" class="btn btn-default" name="modal new add"&gt;
          ADD
      &lt;/button&gt;
      &lt;button type="button" class="btn btn-default" name="modal new delete"&gt;
          DEL
      &lt;/button&gt;
  
  &lt;/div&gt;
  &lt;table id="table_new"
  class="table table-condensed table-hover table-striped" 
  name="new"
  data-toolbar="#modal_toolbar_new"
  data-sortable="true"
  data-toggle="table"
  data-show-toggle="true"
  data-show-columns="true"
  data-height="350"
  data-search="true"
  &gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th data-field="state" data-checkbox="true" data-formatter="stateFormatter"&gt;&lt;/th&gt;
              &lt;th data-sortable="true" data-field="outage_id"&gt;ID&lt;/th&gt;
              &lt;th data-sortable="true" data-field="system_code"&gt;System&lt;/th&gt;
              &lt;th data-sortable="true" data-field="type"&gt;Type&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
  </code></pre>
  
  <h2>    </h2>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code> var selected = {
      new: []
  };
  $(function() {
  
      $("button[name='modal new delete']").click(function() {
          $('#table_new').bootstrapTable('remove', {
              field: 'id',
              values: selected.new
          });
          selected.new = [];
      });
  
  
      $("button[name='modal new add']").click(function() {
          var randomId = Number(new Date());
  
          $('#table_new').bootstrapTable('insertRow', {index: 1, row: {
                  id          : randomId,
                  outage_id   : '&lt;input type="text" class="form-control" name="outage_id" value="change this value, next delete one row'+randomId+'"/&gt;',
                  system_code : '&lt;select class="form-control" name="system_code"&gt;&lt;option value=""&gt;&lt;/option&gt;&lt;/select&gt;',
                  type : '&lt;input type="checkbox" name="dotyczy_atv"/&gt;'
              }
          });
  
      });
  
    /* click input actions */    
      $('.table').on('check.bs.table', function(e, name, args) {
          setSelectedItems($(this).attr('id'), $(this).attr('name'));
      });
      $('.table').on('uncheck.bs.table', function(e, name, args) {
          setSelectedItems($(this).attr('id'), $(this).attr('name'));
      });
  
      $('.table').on('check-all.bs.table', function(e, name, args) {
          setSelectedItems($(this).attr('id'), $(this).attr('name'));
      });
      $('.table').on('uncheck-all.bs.table', function(e, name, args) {
          setSelectedItems($(this).attr('id'), $(this).attr('name'));
      });
  
      });
  
  function setSelectedItems(id, name) {
  
      switch( id ) {
          case 'new':
              selected.new = [];
              $($('#table_new').bootstrapTable('getSelections')).each(function(index) {
                  selected[name].push(this.id);
              });   
              break;
          default:            
              selected[name] = [];
              $($('#' + id).bootstrapTable('getSelections')).each(function(index) {
                  selected[name].push(this.id);
              });            
              break;
      }
  }
  </code></pre>