bootstrap remote modal shows same content in wenzhixin bootstrap-table

Question

I need to open a remote modal. my problem is after closing the modal, on next open it shows the same content. i had try some solutions, but still not resolved. how can i clear the modal between load/show's? the examples of problems is http://jsfiddle.net/NUCgp/2879/

var columns = [{
  field: "id",
  title: 'ID',
}, {
  field: "link",
  title: 'LINK'
}];
var data = [{
  "id": "1",
  "link": "link1"
}, {
  "id": "2",
  "link": "link2"
}];

function dspInformStatus(value, row, index) {
  var rtnVal = '<a class="inform-status" data-remote="http://fiddle.jshell.net/bHmRB/93/show/" data-toggle="modal" data-target="#inform-status' + index + '">' + value + '</a>';
  rtnVal += [
    '<div class="modal fade" id="inform-status' + index + '" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">',
    '<div class="modal-dialog">',
    '<div class="modal-content"></div>',
    '</div>',
    '</div>'
  ].join("");
  return rtnVal;
}
var clickInformStatus = {
  'click .inform-status': function(e, value, row, index) {
    $(this).siblings("#inform-status" + index).on('hidden.bs.modal', function(event) {
      $("#get-random").append("<li>" + $("#random").html() + "</li>");
      $(this).removeData('bs.modal'); //noneffective
      $(this).data('bs.modal', null); //noneffective
      $(this).removeData(); //noneffective
    });
  }
};

$(function() {
  columns[1]["formatter"] = dspInformStatus;
  columns[1]["events"] = clickInformStatus;

  $('#table').bootstrapTable({
    columns: columns,
    data: data
  });
});

<table id="table">
</table>
<div style="margin-top:150px;">
  get random number from remote page --->http://fiddle.jshell.net/bHmRB/93/show/
  <br />(shoud be append new number to ul element everytime when click link, but it is wrong now!)
  <ul id="get-random" style="width: 200px;height:100px;border: 5px solid #337ab7;">

  </ul>
</div>