Is there a nicer way to work on an array in a loop? [closed]

Let’s say I have an array of 12 elements; each containing an integer.
I want to call a function. That function would get as parameter the place in the array. Then the function would read the value of this element in the array; let’s call it ‘nTime’. Set it to zero. And will increment by 1 the value contained in the next cells of the array for the ‘nTime’ given. Also if the next cell which value should be incremented is > to the number cells in the array then that value should be inscribed in the first cell of the array and so on. In a circle.

The LOGIC of the game is: 2 players with 6 ‘houses’ each. The first house of the active player is on the lower row to the lefts. So that the the other player who ‘sits’ in front of him has his first house on the upper row but diametrically opposed.

I’m trying to do that. I haven’t fully tested it yet but I think I’m trying to reinvent the wheel when a certainly easier solution exists:

Here is what I’ve done so far:

class classGroup {
  constructor(nbrPeas, occupied) {
    this.nbrPeas = 4;
    this.occupied = 'false';
    this.isFull = 'false';
  }
}

var myArray = [];

for (var i = 1; i < 13; i++) {
  myArray[i] = new classGroup(4, 'false', 'false');
}

function shiftCells(callingCell) {
  var byID
  var startLoop = callingCell + 1;
  var stopLoop = callingCell + myArray[callingCell].nbrPeas + 1;

  myArray[callingCell].nbrPeas = 0;


  for (var i = startLoop; i < stopLoop; i++) {
    if (myArray[i].isFull === 'false') {
      if (i < 13) {
        if ((myArray[i].nbrPeas + 1 < 12)) {
          myArray[i].nbrPeas = myArray[i].nbrPeas + 1;
        } else {
          myArray[i].isFull = 'true';
          spillOverflow(i);
          stopLoop = stopLoop + 1;
        }
      } else {
        myArray[i - 12].nbrPeas = myArray[i - 12].nbrPeas + 1;
        spillOverflow(i);
        stopLoop = stopLoop + 1;
      }
    } else {
      stopLoop = stopLoop + 1;
    }
  }

  for (var i = 1; i < 13; i++) {
    byID = 'cell' + i;
    document.getElementById(byID).innerText = myArray[i].nbrPeas;
    console.log(myArray[i].nbrPeas);
  }
}

function spillOverflow(cellNbr) {
  var freeFound = false;
  var cellIncr = cellNbr + 1;

  while (freeFound === false) {
    if (myArray[cellIncr].isFull === 'false') {
      freeFound = true;
      myArray[cellIncr].isFull = 'true';
    } else {
      cellIncr = cellIncr + 1;
    }
  }
}

table,
th,
td,
tr {
  border: 2px solid;
  text-align: center;
  padding: 10px;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<table style="width: 70%; margin-top: 10px; margin-left: 15%; font-size: 1.8em;">
  <tr style="text-align:center">
    <th id="cell12">4</th>
    <th id="cell11">4</th>
    <th id="cell10">4</th>
    <th id="cell9">4</th>
    <th id="cell8">4</th>
    <th id="cell7">4</th>
  </tr>
  <tr>
    <th id="cell1" onclick="shiftCells(1)">4</th>
    <th id="cell2" onclick="shiftCells(2)">4</th>
    <th id="cell3" onclick="shiftCells(3)">4</th>
    <th id="cell4" onclick="shiftCells(4)">4</th>
    <th id="cell5" onclick="shiftCells(5)">4</th>
    <th id="cell6" onclick="shiftCells(6)">4</th>
  </tr>
</table>

That is just a draft working on the logic for something bigger. Clicking on any cell in the bottom row should work and gives expected values.

Is there a ‘nicer’ way to get to the same result?