update table with JSON data

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="container">
    <p>
        <table id="placar" class="table table-condensed table-striped">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Style Name</th>
                    <th>Start Tag</th>
                    <th>End Tag</th>
                    <th>Delete</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
        <button id="addRow" class="btn btn-primary">Add Row</button>
        <button id="dump" class="btn">dump</button>
</div>

JavaScript

var currentID = '541';

function updateScore(data) {
    var tbody = $("#placar").find('tbody');
    //console.log(tbody);

    for (key in data) {
        var one = data[key];
        
				AddRow(one);
    }
}

function AddRow(one) {
	var tr = $('#placar > tbody > #' + one.order);
	if (tr.length == 0) {
		$('#placar > tbody:last').append('<tr id=' + one.order + '></tr>');
		tr = $('#placar > tbody > #' + one.order);
    tr.append('<td id="order"></td>');
    tr.append('<td><input name="name" type="text"/></td>');
    tr.append('<td><input name="stag" type="text"/></td>');
    tr.append('<td><input name="etag" type="text"/></td>');
    tr.append('<td><button id="Delete" ref="'+one.order+'" class="btn btn-primary">Del</button></td>');
    var orderTd = $('#placar > tbody > #' + one.order + '> #order');
	}

  if (one.id == currentID) {
    tr.addClass("info");
  } else {
  	tr.removeClass("info");
  }

  $('#placar > tbody > #' + one.order + ' > #order').text(one.order);
  $('#placar > tbody > #' + one.order + ' > td >  input[name="name"]').val(one.name);
  $('#placar > tbody > #' + one.order + ' > td >  input[name="stag"]').val(one.stag);
  $('#placar > tbody > #' + one.order + ' > td >  input[name="etag"]').val(one.etag);
}


$('#addRow').click(function() {
	table1[table1.length]={
    'order': table1.length+1,
    'name': 'xxx',
    'stag': '\[x\]',
    'etag': '\[/x\]'
		};
  console.log(table1.length);
	updateScore(table1);	
  
});

$('#dump').click(function() {
  console.log(table1);
});


$(document).on("click", "#Delete" , function() {
	rid=$(this).attr("ref");
	console.log(rid);
  deleteRow(rid);
});
        
function deleteRow(rowid){
  console.log('Deleting row '+rowid);
	table1.splice(rowid-1, 1);
  console.log(table1);
  
 	var tr = $('#placar > tbody > #' + rowid);
	if (tr.length != 0) {
  	tr.remove();
  }
  
	updateScore(table1);	
}



var table1 = [{
    'order': '1',
    'name': 'Default',
    'stag': '\[p\]',
    'etag': '\[/p\]'
}, {
   ...