JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Without empty volumes: shows correct</h1>

<table class="table">
  <thead>
    <tr>
      <th>Date</th>
      <th>Vol</th>
      <th>Consumed</th>
    </tr>
  </thead>
  <tr>
    <td class="date">2021-08-15</td>
    <td class="volume">80</td>
    <td class="consumed"></td>
  </tr>
  <tr>
    <td class="date">2021-08-14</td>
    <td class="volume">110</td>
    <td class="consumed"></td>
  </tr>
  <tr>
    <td class="date">2021-08-13</td>
    <td class="volume">160</td>
    <td class="consumed"></td>
  </tr>
  <tr>
    <td class="date">2021-08-12</td>
    <td class="volume">220</td>
    <td class="consumed"></td>
  </tr>
</table>
<!----------------------------------------------->
<br /><br />
<h1>With some empty volumes; now it fails</h1>
<table class="table">
  <thead>
    <tr>
      <th>Date</th>
      <th>Vol</th>
      <th>Consumed</th>
    </tr>
  </thead>
  <tr>
    <td class="date">2021-08-15</td>
    <td class="volume">80</td>
    <td class="consumed"></td>
  </tr>
   <tr>
    <td class="date">2021-08-15</td>
    <td class="volume"></td>
    <td class="consumed"></td>
  </tr>
  <tr>
    <td class="date">2021-08-14</td>
    <td class="volume">110</td>
    <td class="consumed"></td>
  </tr>
   <tr>
    <td class="date">2021-08-14</td>
    <td class="volume"></td>
    <td class="consumed"></td>
  </tr>
   <tr>
    <td class="date">2021-08-14</td>
    <td class="volume"></td>
    <td class="consumed"></td>
  </tr>
  <tr>
    <td class="date">2021-08-13</td>
    <td class="volume">160</td>
    <td class="consumed"></td>
  </tr>
   <tr>
    <td class="date">2021-08-13</td>
    <td class="volume"></td>
    <td class="consumed"></td>
  </tr>
  <tr>
    <td class="date">2021-08-12</td>
    <td class="volume">220</td>
    <td class="consumed"></td>
  </tr>
</table>
<!----------------------------------------------------------->
<br /><br />
<h1>Should look like this</h1>
<table class="table">
  <thead>
    <tr>
      <th>Date</th>
      <th>Vol</th>
     ...

CSS

table {
  float: left;
}
td.date, td.volume, td.consumed {
  border: 1px solid #ccc;
  padding: 5px;
}
h1 {
  font-weight: bold;
  font-size:20px;
}

JavaScript

$('.volume').each(function() {
  const next = $(this).parent().next().find('.volume')
  $(this).siblings('.consumed').html(+next.html() - $(this).html())
})