How to undo class change in html table

Heisenberg :

When I try to undo class change,I suffer some problems.

I could get clicked element, but my desired result is to get class changed element and undo it.

For example in my snippet,I would like to undo all the class change at the same time.

In other words, I would like to getclass changed element array.

Are there any method?

Thanks

let clicked=[];

$(function() {
  $("td").click(function() {
    $(this).nextAll(':lt(4)').addClass('color');
     let clickedID=$(this).attr('id');
     clicked.push(clickedID);
});
});

$(function() {
  $("#btnCancel").on('click',() => {
    if(clicked.length) {
      let lastClicked = clicked.pop();
      $(`td#${lastClicked}`).removeClass();
    }
  });
  });

table td {
  width: 20px;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
  border: 1px solid gray;
  text-align: center;
  padding: 5px;
  cursor: pointer;
}
.color {
  background-color: hsl(60,100%,60%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
<tr>
<td id=1>1</td>
<td id=2>2</td>
<td id=3>3</td>
<td id=4>4</td>
<td id=5>5</td>
<td id=6>6</td>
<td id=7>7</td>
<td id=8>8</td>
<td id=9>9</td>
</tr>
</table>

<button id="btnCancel">undo</button>

Rayon :

.removeClass([className]) Remove a single class, multiple classes, or all classes from each element in the set of matched elements.

$('td#${lastClicked}').nextAll(':lt(4)').removeClass('color'); would return the last selected/updated elements.

let clicked = [];

$(function() {
  $("td").click(function() {
    $(this).nextAll(':lt(4)').addClass('color');
    let clickedID = $(this).attr('id');
    clicked.push(clickedID);
  });
});

$(function() {
  $("#btnCancel").on('click', () => {
    if (clicked.length) {
      let lastClicked = clicked.pop();
      $(`td#${lastClicked}`).nextAll(':lt(4)').removeClass('color');
    }
  });
});

table td {
  width: 20px;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
  border: 1px solid gray;
  text-align: center;
  padding: 5px;
  cursor: pointer;
}

.color {
  background-color: hsl(60, 100%, 60%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tr>
    <td id=1>1</td>
    <td id=2>2</td>
    <td id=3>3</td>
    <td id=4>4</td>
    <td id=5>5</td>
    <td id=6>6</td>
    <td id=7>7</td>
    <td id=8>8</td>
    <td id=9>9</td>
  </tr>
</table>

<button id="btnCancel">undo</button>

Collected from the Internet

Please contact [email protected] to delete if infringement.