Jquery ajax – Adding the same event handler(ajax) for same event more than one element not setting the attribute value properly in jQuery | jQuery | Ajax

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.

<input type="text" name="ele1" id="ele1">
<input type="text" name="ele2" id="ele2">

$(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);
            }
        });
    }
});

for testing purposes, I manually add 5 seconds delay.

<?php
// test_upload.php
sleep(5);
$response = [
    'success' => true,
    'name' => 'test_name'
];
header('Content-Type: application/json');
echo json_encode($response);

Problem: 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)