I have a table with buttons. My goal is whenever I click a button, it will disable. My problem is when I click the button, it only disable the first button in the column. What I want is to disable only the specific button that I have click. I used bootstrap for the table and buttons.

Here is my button:

<td>
    <input type="button" onclick="checker()" href="php/doneProblem.php?problemID=<?= $rows['problemID'] ?>" id="btn-done" class="btn btn-primary" value="Mark as Done" />
</td>

Here's how I disable the button:

 <script>
    function checker() {
        var result = confirm('Are you sure to mark this as done?');
        if (result == false) {
            event.preventDefault();
        } else {
            $('#btn-done').attr('disabled', true);
            $('#btn-done').addClass('disabled');
        }
    }
</script>

I tried using class instead of id but it disable all the buttons when I click a single button.