BootstrapTable - dynamically add and delete row

Question

I'm using BootstrapTable 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

http://jsfiddle.net/71na5kne/

HTML Table

<div id="modal_toolbar_new" class="btn-group " >
    <button type="button" class="btn btn-default" name="modal new add">
        ADD
    </button>
    <button type="button" class="btn btn-default" name="modal new delete">
        DEL
    </button>

</div>
<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"
>
    <thead>
        <tr>
            <th data-field="state" data-checkbox="true" data-formatter="stateFormatter"></th>
            <th data-sortable="true" data-field="outage_id">ID</th>
            <th data-sortable="true" data-field="system_code">System</th>
            <th data-sortable="true" data-field="type">Type</th>
        </tr>
    </thead>

Javascript

 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   : '<input type="text" class="form-control" name="outage_id" value="change this value, next delete one row'+randomId+'"/>',
                system_code : '<select class="form-control" name="system_code"><option value=""></option></select>',
                type : '<input type="checkbox" name="dotyczy_atv"/>'
            }
        });

    });

  /* 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;
    }
}

Answer 1

To add a row dynamically, use the 'insertRow' option of bootstrap:

 var rowId = $("#tableName >tbody >tr").length;
        rowId = rowId + 1;
        console.log("RowId is "+rowId);
        $('#tableName').bootstrapTable('insertRow',{
            index: rowId,
            row: myList[0] //myList is an array containing json data in each row
        });

To delete a row dynamically , you can use jquery directly:

$("#tableName tr:eq("+delrowId+")").remove(); //to delete row 'i', delrowId should be i+1