Hi I am new to ajax and I have a json response from django with a list of names to be displayed as a list of buttons. I want to disable the button once it is clicked.

Below is the html code I currently write, the button display successfully but it does not do the disable button action.

I would also like to ask what is the scope of this onclick function? Does the function dies at the end of the curly bracket }? Or does this function check even it is out of scope?

<h3>User List:</h3>
<ul id="userLists"> </ul>

$(document).ready(function(){
    $.ajax({
        type:"GET",
        // getUserList is a django views where it query the database and returns JsonResponse of the user's name
        url: "{% url 'getUserList' %}",
        success: function(response){
        $("#userLists").empty();
        // Create a list according to number of users in json
        for (var key in response.users){
            var temp="<button type=\"button\", name=\""+ response.users[key].user +"\", class=\"btn btn-outline-danger\">" + response.users[key].user + "</button>";
            $("#userLists").append(temp);


            // Here I want to do when clicked, it disables the button and leave others as is.
            // Current implementation does not work...

            document.getElementsByName(response.users[key].user).onclick =
            function(){document.getElementsByName(response.users[key].user).prop('disabled', true)};

            };
        }
    });
})

I have also tried the following implementation, it does not work...

if(document.getElementsByName(response.user[key].user).clicked == true){
    document.getElementsByName(response.user[key].user).prop("disabled", true);
};

Thanks all.