Depending on the numerical value, find the total number of the next cell and color it

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function getNumber(el) {
  return parseFloat(el.textContent);
}

const rows = document.querySelectorAll('tbody tr');
const total = getNumber(document.querySelector('#money'));

rows.forEach(row => {
  const sum = row.querySelector('td:nth-child(2)');
  const tick = row.querySelector('td:nth-child(3)');
    const upcoming = row.querySelector('td:nth-child(3)'); 
  
  
  
  if (getNumber(sum) <= total) {
    row.classList.add('green');
    tick.classList.add('tick');
  }
  
  if (getNumber(sum) > total) {
    row.classList.add('purple');
    upcoming.classList.add('upcoming');
  }
});

<!-- language: lang-css -->

table {
  width: 75%;
  top: 0;
}

th {
  background-color: #193d49;
  color: #f1f1f1;
  font-size: 15px;
  padding: 4px;
}

tbody tr {
  background-color: #376282;
}

td {
  color: #fff;
  font-size: 15px;
  padding: 4px;
  text-align: center;
}

#money {
  background-color: gold;
  color: blue;
  font-size: 15px;
  padding: 4px;
  text-align: center;
}

td:nth-of-type(2):before { content: "€"; }


.green {background-color: green; }
.blue {background-color: #003366; color: #fff; }
.purple {background-color: purple;  color: #fff; }

.tick:after { content: '✓'; }
.upcoming:after { content: 'Upcoming...'; }

<!-- language: lang-html -->

<table id="table-id">
  <thead>
    <tr>
      <th>A/A</th>
      <th>MONEY</th>
      <th>GOAL</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>100</td>
      <td></td>
    </tr>
    <tr>
      <td>2</td>
      <td>200</td>
      <td></td>
    </tr>
    <tr>
      <td>3</td>
      <td>500</td>
      <td></td>
    </tr>
    <tr>
      <td>4</td>
      <td>1000</td>
      <td></td>
    </tr>
     <tr>
      <td>5</td>
      <td>5000</td>
      <td></td>
    </tr>
  </tbody>
</table>

<h3>Total €<span id="money">200</span></h3>

<!-- end snippet -->

When I achieve a money goal, the corresponding rows is colored green with a check symbol.

This is definitely done manually. For example if I write 100 on the table, the 100 goal is completed.

1. What I want is, if I write for example 98, to write in the goal column "Remain €2 to complete".

And this should happen for every goal, 200, 500, 1000, 5000. If I write 420 =&gt; "Remain €80 to complete"

1. Also, in the exact next cells where the target has not been completed yet, I want it to have the blue color and not the colors that are in the upcoming cells (photo).

Is it possible;

function getNumber(el) {
  return parseFloat(el.textContent);
}

const rows = document.querySelectorAll('tbody tr');
const total = getNumber(document.querySelector('#money'));

rows.forEach(row => {
  const sum = row.querySelector('td:nth-child(2)');
  const tick = row.querySelector('td:nth-child(3)');
 	const upcoming = row.querySelector('td:nth-child(3)'); 
  
  
  
  if (getNumber(sum) <= total) {
    row.classList.add('green');
    tick.classList.add('tick');
  }
  
  if (getNumber(sum) > total) {
    row.classList.add('purple');
    upcoming.classList.add('upcoming');
  }
});

table {
  width: 75%;
  top: 0;
}

th {
  background-color: #193d49;
  color: #f1f1f1;
  font-size: 15px;
  padding: 4px;
}

tbody tr {
  background-color: #376282;
}

td {
  color: #fff;
  font-size: 15px;
  padding: 4px;
  text-align: center;
}

#money {
  background-color: gold;
  color: blue;
  font-size: 15px;
  padding: 4px;
  text-align: center;
}

td:nth-of-type(2):before { content: "€"; }


.green {background-color: green; }
.blue {background-color: #003366; color: #fff; }
.purple {background-color: purple;	color: #fff; }

.tick:after { content: '✓'; }
.upcoming:after { content: 'Upcoming...'; }


<table id="table-id">
  <thead>
    <tr>
      <th>A/A</th>
      <th>MONEY</th>
      <th>GOAL</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>100</td>
      <td></td>
    </tr>
    <tr>
      <td>2</td>
      <td>200</td>
      <td></td>
    </tr>
    <tr>
      <td>3</td>
      <td>500</td>
      <td></td>
    </tr>
    <tr>
      <td>4</td>
      <td>1000</td>
      <td></td>
    </tr>
     <tr>
      <td>5</td>
      <td>5000</td>
      <td></td>
    </tr>
  </tbody>
</table>


<h3>Total €<span id="money">200</span></h3>

When the Money column is more than the total, use a variable to indicate whether this is the first row like this. If it is, display the remaining amount instead of the checkbox.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function getNumber(el) {
  return parseFloat(el.textContent);
}

const rows = document.querySelectorAll('tbody tr');
const total = getNumber(document.querySelector('#money'));
let firstRemaining = true;

rows.forEach(row => {
  const sum = row.querySelector('td:nth-child(2)');
  const tick = row.querySelector('td:nth-child(3)');
  const upcoming = row.querySelector('td:nth-child(3)');
  const amount = getNumber(sum);

  if (amount <= total) {
    row.classList.add('green');
    tick.classList.add('tick');
  } else if (firstRemaining) {
    tick.innerText = `Remain €${amount-total} to Complete`;
    row.classList.add("blue");
    firstRemaining = false;
  } else  {
    row.classList.add('purple');
    upcoming.classList.add('upcoming');
  }
});

<!-- language: lang-css -->

table {
  width: 75%;
  top: 0;
}

th {
  background-color: #193d49;
  color: #f1f1f1;
  font-size: 15px;
  padding: 4px;
}

tbody tr {
  background-color: #376282;
}

td {
  color: #fff;
  font-size: 15px;
  padding: 4px;
  text-align: center;
}

#money {
  background-color: gold;
  color: blue;
  font-size: 15px;
  padding: 4px;
  text-align: center;
}

td:nth-of-type(2):before {
  content: "€";
}

.green {
  background-color: green;
}

.blue {
  background-color: #003366;
  color: #fff;
}

.purple {
  background-color: purple;
  color: #fff;
}

.tick:after {
  content: '✓';
}

.upcoming:after {
  content: 'Upcoming...';
}

<!-- language: lang-html -->

<table id="table-id">
  <thead>
    <tr>
      <th>A/A</th>
      <th>MONEY</th>
      <th>GOAL</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>100</td>
      <td></td>
    </tr>
    <tr>
      <td>2</td>
      <td>200</td>
      <td></td>
    </tr>
    <tr>
      <td>3</td>
      <td>500</td>
      <td></td>
    </tr>
    <tr>
      <td>4</td>
      <td>1000</td>
      <td></td>
    </tr>
     <tr>
      <td>5</td>
      <td>5000</td>
      <td></td>
    </tr>
  </tbody>
</table>

<h3>Total €<span id="money">200</span></h3>

<!-- end snippet -->