title: Wait for button click event before continue loop Javascript
body: <p>I have a code loop that adds options to a popup modal, with buttons alongside each option. </p>
  
  <p>In a search loop, sometimes when the search returns multiple items, we must show the modal, and the user selects which part.</p>
  
  <p>I want to pause the loop and wait for the user to choose an item, before continuing.</p>
  
  <p><strong>MY LOOP</strong></p>
  
  <pre><code>$.each(rows, function (index, item) {
      SearchItems(item.split('\t')[0], item.split('\t')[1]);
  });
  </code></pre>
  
  <p><strong>SEARCH ITEM FUNCTION</strong></p>
  
  <pre><code>function SearchItems(searchedPart, quantity) {
  
      $.ajax({
          type: "POST",
          contentType: "application/json; charset=utf-8",
          url: "OrderFormServices.asmx/GetItemInfoAdmin",
          data: "{'itemname':'" + searchedPart + "','quantity':'" + (quantity || 1) + "', 'guid':'" + custGuid + "' }",
          dataType: "json",
          success: function (result) {
  
              result = result.d;
  
              if (result.length &gt; 1) {
  
                  var htmlString = "";
                  $.each(result, function(index, item) {
                      item.PartNumber = (item.PartNumber != "") ? item.PartNumber : item.ItemName;
                      htmlString += "&lt;tr&gt;&lt;td&gt;"
                          + "&lt;input type=\"hidden\" name=\"ItemID\" value=\"" + item.ItemID + "\"&gt;"
                          + "&lt;input type=\"hidden\" name=\"ItemCode\" value=\"" + item.ItemCode + "\"&gt;"
                          + "&lt;input type=\"hidden\" name=\"Price\" value=\"" + item.Price + "\"&gt;"
                          + "&lt;input type=\"hidden\" name=\"Quantity\" value=\"" + item.Quantity + "\"&gt;"
                          + "&lt;input type=\"hidden\" name=\"CustomerReference\" value=\"" + searchedPart + "\"&gt;"
                          + "&lt;input type=\"hidden\" name=\"PackQuantity\" value=\"" + item.PackQuantity + "\"&gt;"
                          + "&lt;input type=\"hidden\" name=\"FreeStock\" value=\"" + item.FreeStock + "\"&gt;"
                          + item.PartNumber + "&lt;/td&gt;&lt;td&gt;"
                          + item.ManufacturerName + "&lt;/td&gt;&lt;td&gt;"
                          + item.ItemName + "&lt;/td&gt;&lt;td&gt;"
                          + item.ItemDescription + "&lt;/td&gt;&lt;td&gt;&lt;input type='button' name=\"selectPopup\" onclick=\"ChoosePopup($(this).closest('tr'));\" class='btn  btn-primary btn-xs' value='Select'&gt;&lt;/td&gt;&lt;/tr&gt;";
                  });
                  $("#tbodyPopupContent").html(htmlString);
                  $("#PopUpNormalProduct").modal();
                  modalfix();
                  $("#divPopupWindow").parent("").addClass("quicksearchpopup");
  
  //////////////////////////////////////////////////////////////////////////
  //////////////// WAIT FOR BUTTON CLICK AND PERFORM CODE///////////////////
  //////////////////////////////////////////////////////////////////////////
  
                  $("#partNumber").prop("disabled", false);
  
              } else if (result.length &lt; 1) {
                  $("#partNumber").prop("disabled", false);
                  $('#partNumber').focus();
              }
              else {
                  ///////
              }
          }
      });
  }
  </code></pre>
  
  <p>The popup item buttons fire a <code>ChoosePopup()</code> function.</p>
  
  <pre><code>function ChoosePopup(row) {
  
      var $hidden_fields = row.find("input:hidden");
      var $tds = row.find("td");
  
      var newItem = {
          ItemID: parseFloat($hidden_fields.eq(0).val()),
          ItemCode: $hidden_fields.eq(1).val(),
          ItemDescription: $tds.eq(3).text(),
          ItemName: $tds.eq(2).text(),
          Price: parseFloat($hidden_fields.eq(2).val()),
          Quantity: parseFloat($hidden_fields.eq(3).val()),
          CustomerReference: $hidden_fields.eq(4).val(),
          PackQuantity: parseFloat($hidden_fields.eq(5).val()),
          FreeStock: parseFloat($hidden_fields.eq(6).val())
      };
  
      AddNewRow(newItem, true);
      $("#PopUpNormalProduct").modal("hide");
  }
  </code></pre>
  
  <p>How can I wait for this <code>ChoosePopup()</code> function to complete, before continuing the loop?</p>