I have a table with a button to delete rows, and there is one column in the table that would check for duplicate inputs. The delete function and the duplicate-checking function are working fine. But if I have a duplicate in rows 1 and 5, and then I try to delete row 3, the alert message will pop up before row 3 is disappeared. The result and the alert message show correctly as "Row 1 and row 4 are duplicate!" but the table still has row 5 before I click "OK" in the alert box (i.e. row 5 will be removed once I click "OK").

function Delete_Row(r) {
    var i = r.parentNode.parentNode.rowIndex;
    document.getElementById("Settlement_Table").deleteRow(i);
    for (var i = 1; i< document.getElementById("Settlement_Table").rows.length; i++){
        document.getElementById("Settlement_Table").rows[i].cells[0].innerHTML = i;
    }
    myFunction();
}


function myFunction() {
  var x = document.getElementsByName("Material[]");
  var total_rows = document.getElementById("Settlement_Table").rows.length-1;
  for(var i=0; i<total_rows-1; i++){
      for(var j=i+1; j<total_rows; j++){
          if(x[i].value==x[j].value){
              alert("Row "+ (i+1) + "and row " + (j+1) + " are duplicate!");
          }
      }
  }
}

By the order, the deleteRow(i) function should delete the row and the innerHTML() should update the cell before alert(message) pop up. But somehow the message shows before the table display update. I'm thinking it might be the priority issue with these functions but not really sure. Thank you ahead for any help.