Ajax function only displaying one div at a time, PHP, AJAX

Question

I have a working ajax function where when its called by the click of a button, it gets the time and display it to the screen, waits five seconds, and does it again. However, only 1 div at the max is displayed at the same time. I want to display both divs at the same time when they're both clicked, but it just doesn't display both at the same time. I'm not sure what I did wrong. Please take a look at my code below:

test1.php

#output1 {
border: 1px solid green;
}
#output2 {
border: 1px solid red;
}

<?php

include('ajax.php');

echo "<input type = 'submit' name = 'name1' value = 'Reset' onclick = 'timeoutAjax(\"test2.php\",\"input\",\"name1\",\"output1\",\"5000\")'>";
echo "<input type = 'submit' name = 'name2' value = 'Reset' onclick = 'timeoutAjax(\"test2.php\",\"input\",\"name2\",\"output2\",\"5000\")'>";

echo "<div id = 'output1'/>";
echo "<div id = 'output2'/>";

?> 

test2.php

<?php

$time = date('H:i:s A');
echo $time;

?> 

ajax.php

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script type = "text/javascript"> 

// prepare some storage for the xhr and timeout
var queued, xhr;

function timeoutAjax(url, type, theName, id, timeout) {
    // abort pending calls
    if (xhr) {
        xhr.abort();
    }
    // abort queued calls
    clearTimeout(queued);

    // make the call
    xhr = $.ajax({
        type: "POST",
        url: url,
        data: {
            select: $(type + '[name=' + theName + ']').val()
        },
        error: function (xhr, status, error) {
            alert(error);
        },
        success: function (data) {
            document.getElementById(id).innerHTML = data;
            // queue a new call
            queued = setTimeout(function () {
                timeoutAjax(url, type, theName, id, timeout);
            }, timeout);
        }

    });

}

</script>

Answer 1

change your scripts to be like this:

test.php:

<style>
#output1 {
    min-height: 20px;
border: 1px solid green;
}
#output2 {
    min-height: 20px;
border: 1px solid red;
}
</style>
<?php

include('ajax.php');

echo "<input type = 'submit' name = 'name1' value = 'Reset' onclick = 'timeoutAjax(\"test2.php\",\"input\",\"name1\",\"output1\",\"5000\")'>";
echo "<input type = 'submit' name = 'name2' value = 'Reset' onclick = 'timeoutAjax(\"test2.php\",\"input\",\"name2\",\"output2\",\"5000\")'>";

echo "<div id = 'output1'></div>";
echo "<div id = 'output2'></div>";

?>

test2.php:

<?php

$time = date('H:i:s A');
echo $time;

?> 

ajax.php:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script type = "text/javascript">
var queues = {};
function timeoutAjax(url, type, theName, id, timeout) {
    clearInterval(queues[theName]);
    // make the call
    $.ajax({
        type: "POST",
        url: url,
        data: {
            select: $(type + '[name=' + theName + ']').val()
        },
        error: function (xhr, status, error) {
            alert(error);
        },
        success: function (data) {
            document.getElementById(id).innerHTML = data;
            // queue a new call
            queues[theName] = setInterval(function () {
                timeoutAjax(url, type, theName, id, timeout);
            }, timeout);
        },
        complete: function(){
            $('input[name="'+theName+'"]').prop("disabled",false);
        },
        beforeSend: function(){
            $('input[name="'+theName+'"]').prop("disabled",true);
        }
    });
}
</script>