无法显示表行jquery

I am two tables eg Table A and Table B. When I checked the checkbox on Table A, I am able to append to table B. The problem I am facing is during deleting of rows from Table B. When I delete the rows in reverse order everything works. Meaning deleting from bottom to up. The rows get restored in Table A. But If I delete in random order, for example, I have three rows and when I delete the first row it gets restored to Table A but second and third row does not. If I delete the second row followed by the first row. they get restored but the third row does not.

Attached are the screenshots:

Table A Screenshot 1

Table B Screenshot 2

Here is the code:

$(".delete-row").click(function(){
$('[name="sl"]').val('');
$(".hssl").empty();
  table A --   $(".invt-do").find('input[name="ssl[]"]').each(function(index){
  if($(this).is(":not(:checked)")){
       table B --- $(".sltable tbody tr").eq(index).each(function(){
         $(this).show();
         $(this).find('input[name="ssl[]"]').prop("checked", false);
       });
       $(this).parents("tr").remove();
       $(".hssl").append($(this).parents("tr")); 
       $(".hssl").find('input[name="ssl[]"]').prop("checked", true);
       // $('.sltable tbody tr').eq(index).show();
       //$(".sltable tbody").find('input[name="ssl[]"]').prop("checked", false);
    }
});
$.ajax({
  url:"<?php echo base_url(); ?>updateinvtunstock", //$("#mainsec").attr("action"),
  type:"POST",
  data:$("#dlvssl").serialize(),//only input
  success: function(response){
    $('#dlvdetails').modal('show');
  },
  error: function() {
    swal("Oops", "We couldn't connect to the server!", "error");
  }
}); 
});

Not sure what I doing wrong.

First of all in your code index will return the index of the input I think it'll return 0 each time so just the first row will hide.. not the index of the row

Ok let's start from the delete button click event

When delete button clicked

• loop through the checked inputs
• get closest row index then remove the row
• with row index above you can get the row in another table with the same index.

See the next code

$(".delete-row").click(function(){
  $(".invt-do").find('input[name="ssl[]"]').each(function(){  //loop through table a inputs
    if(this.checked){  // check if its checked
       var Row_Index = $(this).closest('tr').index();  // get checked input row index
       $(".sltable tbody tr").show().eq(index).hide();  // show all rows then hide/remove the same index from table b
       $(this).closest("tr").remove(); // then remove the row from table a
    }
  });
});

If you still need to use your way in coding the next code doesn't make sense

$(".sltable tbody tr").eq(index).each(function(){
       $(this).show();
       $(this).find('input[name="ssl[]"]').prop("checked", false);
}); 

you can replace it with the next code without looping

var Row_Index = $(this).closest('tr').index();
$(".sltable tbody tr").eq(Row_Index).show().find('input[name="ssl[]"]').prop("checked", false);