title: Adding the same event handler(ajax) for same event more than one element not setting the attribute value properly in jQuery | jQuery | Ajax
body: <p>I have two input text box and I have added the same key up event handler which calls the ajax request. I want to perform some snippet(enable the text box) on the "complete" event but they are not working independently.</p>
  
  <pre><code>&lt;input type="text" name="ele1" id="ele1"&gt;
  &lt;input type="text" name="ele2" id="ele2"&gt;
  
  $(function() {
      let ele1 = $('#ele1');
      let ele2 = $('#ele2');
      $("#ele1, #ele2").on('keyup', resourceChange);
      function resourceChange(e) {
          $this = $(this);
          $this.prop('disabled', true);
          $.ajax({
              url: "test_upload.php",
              type: "POST",
              cache: false,
              processData: false,
              contentType: false,
              dataType: 'json',
              complete: function(xhr) {
                  response = xhr.responseJSON;
                  $this.prop('disabled', false);
              }
          });
      }
  });
  </code></pre>
  
  <p>for testing purposes, I manually add 5 seconds delay.</p>
  
  <pre><code>&lt;?php
  // test_upload.php
  sleep(5);
  $response = [
      'success' =&gt; true,
      'name' =&gt; 'test_name'
  ];
  header('Content-Type: application/json');
  echo json_encode($response);
  </code></pre>
  
  <p><strong>Problem:</strong> When I type a character on the first text box, it will be disabled for the next five seconds(count down start). But If I type on second text box before complete these 5 seconds(let say., 3 seconds pass) then the first text box is never enabled. It remains to disable. and the second text box is enabled after remaining seconds from 5 seconds. (5 - 3 = 2 seconds)</p>