How to force unique Cell to delete other cells upon clicking

mikoto dread :

Run the Code Snippet Please, it'll allow you to understand my question better

As you can see, I have cells with numbers and one Cell with Symbol (S) and red color.
If i click on any other cells, my (S)"UniqueCell" will move there.
lets say I click on Cell with number 55, My UniqueCell will move there, replacing the 55 with (S), now I click on other cell, lets say cell that have number 320, my UniqueCell moves from cell 55 to cell 320, now my UniqueCell replaced the 320, with it's (S), however cell 55 gained back its numbers.

How i can prevent the cells from gaining back its numbers? how i can make it lose its numbers permanently once i clicked on it?

note: I'm trying to make a game where player A pick vertical and player B to pick horizontal, hence the green moving vertical and horizontal every click, if possible, i want each time i click on cell where the green is, if it was Vertical, player gain those points, if it was horizontal, player b gain the points

var isCol = 0;
var CellPoint = 0;
var board = [];
var P1 = {
  points: 0
};
var P2 = {
  points: 0
};
for (r = 0; r < 7; r++) {
  var line = [];
  for (c = 0; c < 7; c++) {
    line.push(RandomGenerator(50, 500));
  }
  board.push(line);
}

function prs(curr, c, r) {

  CellPoint = parseInt($(curr).text());

  showTable(curr, c, r);
  isCol = (isCol + 1) % 2;
  $('#turn').text(`Player ${(isCol+1)} turn`);
  if (CellPoint) {
    if (isCol) {P1.points+=CellPoint;}else{P2.points+= CellPoint;}
    $('#p1').text(`Player 1: ${P1.points}`);
    $('#p2').text(`Player 2: ${P2.points}`);
  } else {
    console.log('selected S');
  }


}

function toColor(col, row, chosen_col, chosen_row) {
  var ret = false;
  switch (isCol) {
    case 0:
      if (row == chosen_row) {
        ret = true;
      }
      break;
    case 1:
      if (col == chosen_col) {
        ret = true;
      }
      break;
  }
  return ret;
}

function showTable(c, chosen_col, chosen_row) {
  var str = "";
  str += "<table border=1>";
  for (row = 0; row < 7; row++) {
    str += "<tr>";
    for (let col = 0; col < 7; col++) {
      str += "<td onclick='prs(this, " + col + "," + row + ")'";
      if (toColor(col, row, chosen_col, chosen_row)) {
        if (c.textContent == board[row][col]) {
          str += " class=uniqueCell";
        } else str += " class='grn' ";
      }
      str += ">";
      if (c.textContent == board[row][col]) {
        str += 'S';
      } else str += board[row][col];
      str += "</td>";
    }
    str += "</tr>";
  }
  str += "</table>";

  document.getElementById("ff").innerHTML = str;
}

function RandomGenerator(min, max) {
  return Math.floor(Math.random() * (max - min) + min);
}

showTable(-1);

var getUnique = function() {
  var tdElements = document.querySelectorAll('#ff td');
  tdElements[
    RandomGenerator(0, tdElements.length)
  ].classList.add('uniqueCell');
  // update the text of the cell using the class
  document.querySelector('.uniqueCell').textContent = 'S';
};
getUnique();

var tds = document.querySelectorAll('td');
var flag = true;
var playerA = 0;
var playerB = 0;
tds.forEach(function(td){
  td.addEventListener('click', function(){
    document.querySelectorAll('.grn').forEach(td => td.classList.remove('grn'));
    var col = this.cellIndex + 1;
    var row = this.parentNode.rowIndex;
    if(flag){
      this.parentNode.querySelectorAll('td').forEach(td => td.classList.add('grn'));
      flag = false;
      playerA++;
    }
    else{ 
      document.querySelectorAll(`td:nth-child(${col})`).forEach(c =>c.classList.add('grn'));
      flag = true;
      playerB++;
    }
    this.textContent = 'S';
    this.classList.add('uniqueCell');
    console.clear();
    console.log(`Player A: ${playerA} :: Player B: ${playerB}`);
  });
});

td{
  border:2px solid black;
  width:10px;
  height:10px;
  text-align: center;
}
td:hover{background-color:lightgreen;}
.grn{
  background-color:green;
  color:white;
}

.uniqueCell {
  background-color: tomato;
}

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

<p id='p1'>Player 1: </p>
<p id='p2'>Player 2: </p>
<p id='turn'>Player 1 turn</p>

Rkv88 - Kanyan :

we keep points collected in object P1 & P2 it has for now points property P1.points & P2.points

I added inside prs() funtion called in Onclick

  $('#turn').text(`Player ${(isCol+1)} turn`);
  if (CellPoint) {
    if (isCol) {P1.points+=CellPoint;}else{P2.points+= CellPoint;}
    $('#p1').text(`Player 1: ${P1.points}`);
    $('#p2').text(`Player 2: ${P2.points}`);
  } else {
    console.log('selected S');
  }

var isCol = 0;
var CellPoint = 0;
var board = [];
var P1 = {
  points: 0
};
var P2 = {
  points: 0
};
for (r = 0; r < 7; r++) {
  var line = [];
  for (c = 0; c < 7; c++) {
    line.push(RandomGenerator(50, 500));
  }
  board.push(line);
}

function prs(curr, c, r) {

  CellPoint = parseInt($(curr).text());

  showTable(curr, c, r);
  isCol = (isCol + 1) % 2;
  clr = isCol ? 'blue' : 'red';
  $(curr).text('S');
  $('#turn').css("color", clr)
    .text(`Player ${(isCol+1)} turn`);
  if (CellPoint) {
    if (isCol) {
      P1.points += CellPoint;
    } else {
      P2.points += CellPoint;
    }
    $('#p1').text(`Player 1: ${P1.points}`);
    $('#p2').text(`Player 2: ${P2.points}`);

  } else {
    console.log('selected S');
  }


}

function toColor(col, row, chosen_col, chosen_row) {
  var ret = false;
  switch (isCol) {
    case 0:
      if (row == chosen_row) {
        ret = true;
      }
      break;
    case 1:
      if (col == chosen_col) {
        ret = true;
      }
      break;
  }
  return ret;
}

function showTable(c, chosen_col, chosen_row) {
  if(c!==-1){board[chosen_row][chosen_col] = 'S';}
  var str = "";
  str += "<table border=1>";
  for (row = 0; row < 7; row++) {
    str += "<tr>";
    for (let col = 0; col < 7; col++) {
      str += "<td onclick='prs(this, " + col + "," + row + ")'";
      
        if(board[row][col]=='S'){
          str += " class=uniqueCell";
        } else{
        if (toColor(col, row, chosen_col, chosen_row)) {
        str += " class='grn' ";} }
     
      str += ">";
      if(board[row][col]=='S') {
        str += 'S';
      } else str += board[row][col];
      str += "</td>";
    }
    str += "</tr>";
  }
  str += "</table>";

  document.getElementById("ff").innerHTML = str;
}

function RandomGenerator(min, max) {
  return Math.floor(Math.random() * (max - min) + min);
}

showTable(-1);

var getUnique = function() {
  var tdElements = document.querySelectorAll('#ff td');
  tdElements[
    RandomGenerator(0, tdElements.length)
  ].classList.add('uniqueCell');
  // update the text of the cell using the class
  document.querySelector('.uniqueCell').textContent = 'S';
};
getUnique();

td {
  border: 2px solid black;
  width: 10px;
  height: 10px;
  text-align: center;
}

td:hover {
  background-color: lightgreen;
}

.grn {
  background-color: green;
  color: white;
}

.turn1 {
  background-color: green;
  color: red;
}

.turn0 {
  background-color: green;
  color: blue;
}

.uniqueCell {
  background-color: tomato;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div><span id='p1' style='color:red;'>Player1: </span>&nbsp; X &nbsp;<span style='color:blue;' id='p2'>Player2: </span></div>
<p id='turn'>Player 1 turn</p>
<div id="ff"></div>

How to force unique Cell to delete other cells upon clicking

Guess you like