Jquery to move field above the table - changes during page refresh

I have the below jquery code to move a multiselect field and a button above the table.

jQuery(document).ready(function($){
  $('#views-form-resources-block-1 .form-item-ka-types').insertBefore($('#views-form-myblock-block-1 table'));
  $('#views-form-resources-block-1 #edit-actions--2').insertAfter($('#views-form-myblock-block-1 .form-item-ka-types'));
});

In this code I am moving the ka-types field above myblock view. Pictorial representation as below:

This code works fine when I load the page at first. But when I refresh the page, the multiselect comes down and shows messed up. again when I refresh the page it works fine. not sure what the problem is. Any help on how this can be fixed?

The below is my solution for this:

(function($, Drupal) {
  Drupal.behaviors.searchResults = {
    attach: function() {
      $('#views-form-resources-block-1 .form-item-ka-types')
        .insertBefore($('#views-form-myblock-block-1 table'));
      $('#views-form-resources-block-1 #edit-actions--2')
        .insertAfter($('#views-form-myblock-block-1 .form-item-ka-types'));
    }
  };
}(jQuery, Drupal));

@Kevin is correct. When the form rebuilds the DOM changes are lost. Better understanding of Drupal behaviors link has great explanation and examples of Drupal Behavior.