Change a specific row data of a HTML table as well as database using AJAX call

I have a database table like this -

    -----------------------------------|
    ID         |    Name  |   Status   |
    -----------------------------------|
    101             John        0      |
                                       |
    102             Robert      1      |
                                       |
    103             David       0      |
    -----------------------------------|

By featching this database I am creating a html table (shown below) in which each row has a button to change its current status in the table and also in the backend database. i.e. 0 becomes 1 and 1 becomes 0.

<table>

        <tr>
           <th>ID</th>
           <th>Name</th>
           <th>Status</th>
           <th>Action</th>
         </tr>

         <tr>
                <td>101</td>
                <td> John </td>
                <td> 0 </td>
                <td><button>Change Status</button> </td>
        </tr>

        <tr>
                <td>102</td>
                <td> Robert </td>
                <td> 1 </td>
                <td><button>Change Status</button> </td>
        </tr>

        <tr>
                <td>103</td>
                <td> David </td>
                <td> 0 </td>
                <td><button>Change Status</button></td>
        </tr>

</table>

This should be done without refreshing the page. So I think I should make an AJAX call to the server with the ID and the status of that ID. But I don't understand how to do it.