<td>
        <input type="button" class="add-move-button" id="add-move-button" value="Add Move" onclick="addRow()">
    </td>
<script>
    var btnCount = 0;
    function addRow() {
        btnCount++;
        if(btnCount > 3) {
            alert("You can't click me anymore");
            return;
        }
    }
</script>

In javascript, you have to initialize a global variable for example
var count = 0;

And when you click the button call to a Javascript method for example

function checkRowCount(){
  if(count > 2){
    alert("Count is exceeded");
  }else{
    ++count;
  }
}

Note : when you going to remove a row make sure you are decreasing the count value by 1 ( –count; )

You can use localstorage to check how many rows are added and then act accordingly.

localStorage.setItem('rows-added', 0);
const addRow = () => {
    let current_rows_added = localStorage.getItem('rows-added');
    if (localStorage.getItem('rows-added') == 3){
        alert("you have already added 3 rows")
    }else{
        // your code that adds the row
        localStorage.setItem('rows-added', current_rows_added + 1);
    }
}

I have a button that adds new rows, but I would like it to stop after adding three new rows.

<td>
    <input type="button" class="add-move-button" id="add-move-button" value="Add Move" onclick="addRow()">
</td>

How would I go about approaching this? My thinking is I have to somehow count how many times the button was clicked and then send an alert saying “You can’t click me anymore”. Something like that I hope?