How to keep my data kept in my html table

I am developing an application, in which I have a pair of textbox as input, the objective is that, the user write an order number in the input and make a query to the database to get information from that number of order and at the end place that information in a table. In the following I show a screen of the web:

The problem I have is that, in the "search by" container, when the user searches for the information in order, the input appears, places the order name and goes to the BD, then through ajax I do the writing in the table .. the problem comes when I want to do a sort with data table events, when clicking any of them the data that I put in my table disappear, for example:

Here I have the data in my table when sending it by means of a button with submit and ajax, when I click on the event my data disappears:

Does anyone know how I can solve this ?, that is, when I click on any event, my data is saved and not lost.

I leave the html code:

Inputs form

  <!-- Order or MFGN form begin-->
        <p class="ibm-margin-top-2" id="order">
          <label for="order-mfgn" class="" id="Enter"> Enter order</label>
          <span class="ibm-center-block">
            <input type="text" id="order-value"> <button class="ibm-btn-pri ibm-btn-blue-50" id="submit-order" type="submit" name="order">Submit</button>
          </span>
        </p>
        <p class="ibm-margin-top-2" id="mfgn">
          <label for="mfgn-value" class="" id="Enter"> Enter mfgn </label>
          <span class="ibm-center-block">
            <input type="text" id="mfgn-value" > <button class="ibm-btn-pri ibm-btn-blue-50" id="submit-mfgn" type="submit">Submit</button>
          </span>
        </p>
      </form>
      <!-- Enter the order MFGN end -->

table container (jinja2)

  <div class="ibm-col-12-8 ibm-margin-top-3">
    <!-- table container begin-->

    {% block table %} {% endblock %}
  </div>

Javascript to get the data and send it to the table

$(document).ready(function() {
$('#submit-order').click(function(evt) {
evt.preventDefault();

var order = $('#order-value').val();
data = {
  order: order
}
console.log(data);


$.ajax({
  type: "POST",
  url: "/",
  data:data,
  success: function(response) {
    // console.log('The data is send successfully' + response.order);
    $('#data').html(
      "<tr>"+
      "<td>"+ response.order+"</td>"+
      "<td>"+ response.Mfgn+"</td>"+
      "<td>"+response.Test+"</td>"+
      "<td>"+response.Date+"</td>"+
      "<td>"+ response.Expected+"</td>"+
      "</tr>"
    )
    $('#Enter').value = "";

  }
    });
});

 // $('#submit-mfgn').click(function() {
//   // alert('clic')
//   console.log('clic');
 });
 });