I have jQuery code that's executed on a button click which brings up modals based on the validity of the user input. I have buttons on the modals that when clicked should close the modals, I have 4 different if statements and the modals close when the button is clicked on all the modals except the one in the last if block and I have no idea as the code is the same, what is wrong here? Here's my code below

1. $(function(){
2. 
   
3. $("input[name=addAnotherExpense]").on("click", function(e){
4. e.preventDefault();
5. var expenseDetail = $("input[name=expenseDetail]").val();
6. var expenseAmountVal = $("input[name=expenseAmount]").val();
7. if (expenseAmountVal.length > 10) 
8. {
9. console.log("expenseAmountVal > 3");
10. $('#myDialog1').dialog({
11. title : "Error",
12. hide: "fadeOut",
13. show: "fadeIn",
14. buttons: {
15. "ok" : function(){ $(this).dialog('close'); },
16. "member" : function() { console.log("member button clicked"); }
17. }
18. });
19. }
20. else if (expenseDetail.length < 1)
21. {
22. $('#myDialog2').dialog({
23. modal: "true",
24. title: "Error",
25. show: "fadeIn",
26. hide: "fadeOut",
27. buttons: {
28. "ok" : function(){ $(this).dialog('close'); }
29. }
30. });
31. }
32. else if (expenseAmountVal == 0) 
33. {
34. $('#myDialog3').dialog({
35. title: "Error",
36. modal: "true",
37. show: "fadeIn",
38. hide: "fadeOut",
39. buttons: {
40. "ok" : function(){ $(this).dialog('close'); }
41. }
42. });
43. }
44. else if (expenseDetail.length > 0 && expenseAmountVal.length <= 10 && expenseAmountVal > 0)
45. {
46. (expenseAmountVal > 0) ? expenseAmount = expenseAmountVal : expenseAmount = 0.00;
47. AddAnotherExpense(expenseDetail, expenseAmount);
48. for(i=0, total=0; i<newArray.length; i++)
49. {
50. amount = 0.00;
51. amount = newArray[i].amount;
52. total = parseFloat(total) + parseFloat(amount);
53. console.log("total in for loop = " + total.toFixed(2));
54. details = newArray[i].detail;
55. console.log(newArray[i]);
56. $("#transactions").append(" " + details);
57. }
58. $('#myDialog4').dialog({
59. title: "Item added",
60. modal: "true",
61. show: "fadeIn",
62. hide: "fadeIn",
63. buttons: {
64. "ok" : function(){ $(this).dialog('close'); console.log(this); }
65. }
66. });
67. $("#totalExpensesParagraph").append().text("Total expenses for this month R " + parseFloat(total).toFixed(2));
68. //$("input[name=expenseAmount]").val("placeholder='0.00'");
69. //$("input[name=expenseDetail]").val("");
70. 
    
71. }
72. 
    
74. });
75. 
    
76. });