title: Multiple inputs looping slows down each() and ajax()
body: <p>I have a large number of inputs on a page, each input is disabled (and hidden) by default unless a checkbox is checked. Checking a related checkbox enables the input for a user to type an amount - that works fine.</p>
  
  <p>After I've typed an amount into a given box and I shift my blur focus to something else (indicating I'm done with this input), I'm looping through every visible input to check if it has an amount in it and then sending an ajax request to update the back-end (this also works but maybe approach is wrong?). </p>
  
  <p>What doesn't work is when I loop through more than 5-10 checkboxes, it seems to be extremely slow or simply doesn't send the ajax requests.</p>
  
  <p><em>Code the listens for an enabled/visible amount box to change:</em></p>
  
  <pre><code>$(document).on("blur", ".dollar-amount", function(){  
      MainPage.amountInputListener('add');
  });
  </code></pre>
  
  <p><em>Here is the foreach loop, which updates each associated user's backend data with the amount in the visible field:</em></p>
  
  <pre><code>var MainPage = {
  
      amountInputListener: function (type) {
  
          $(".dollar-amount:visible").each(function () {
  
              //Get the employee being updated
              var empID = $(this).data('empid');
  
              //get the amount
              var amount = $(this).val();
  
              //Send update request to backend
              $.ajax({
                  type: "POST",
                  url: "update/amount?empid=" + empID + "&amp;amt=" + amount + '&amp;type=' + type,
                  dataType: "html"
              });
  
          });
      },
  }
  </code></pre>
  
  <p><em>The HTML for the input:</em></p>
  
  <pre><code>&lt;input type="text" name="dollar_hour_amountX" value="0" class="form-control dollar-amount disabled" data-empid="1" tabindex="-1" disabled&gt;
  </code></pre>
  
  <p><strong>Note:</strong> <code>dollar_hour_amountX</code>, X is a dynamic number related to the row's employee ID. <code>data-empid</code> is the same dynamic number, also used in the for loop.</p>
  
  <p>Things I've tried to ensure the loop works properly:</p>
  
  <ul>
  <li><p>Adding <code>async: false</code>. This allows it to work 100% of the time, but it's extremely slow the more inputs that are added.</p></li>
  <li><p>Adding a timeout of 100-1000ms around the entire function, this simply delays the round-trip time of the Ajax call.</p></li>
  </ul>
  
  <p>I'm open to Vanilla JS suggestions if it aids in making the calls to my back-end much faster and consistent.</p>