How to get total table by adding rows of this table using jquery

Question

I need to get a common table by adding table rows based on the same identifier, but here it fits correctly for the first table, but for the second table it adds the first general table and displays the sum. How not to add this to the second table. my html code is:

<table>
  <tr style="background:#2b2e76">
    <th colspan="1" style="padding: 0;">
      <p style="color:white">
        Table One

      </p>
    </th>
    <th>
      <p style="color:white" class="BundleB4936" id="B4936">Total : <span class="BundelRowTotalB4936">1400.00</span></p>
    </th>
  </tr>
  <tr>
    <td>
      <input type="text" value="200.00" name="row_total[]" id="rowtotal11_B4936" class="rowTotal">
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" value="1200.00" name="row_total[]" id="rowtotal12_B4936" class=" rowTotal">
    </td>
  </tr>
</table>
<table>
  <tr style="background:#2b2e76">
    <th colspan="1" style="padding: 0;">
      <p style="color:white">
        Table Two

      </p>
    </th>
    <th>
      <p style="color:white" class="BundleB1027" id="B1027">Total : <span class="BundelRowTotalB1027">1750.00</span></p>
    </th>
  </tr>
  <tr>
    <td>
      <input type="text" value="100.00" name="row_total[]" id="rowtotal16_B1027" class="rowTotal">
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" value="250.00" name="row_total[]" id="rowtotal17_B1027" class="rowTotal">
    </td>
  </tr>
</table>

my jquery:

 var Bsum = 0;
    var BundelID = '';
    $(".rowTotal").each(function() {
      var RowID = $(this).attr('id');
      var suffix = RowID.match(/\d+/)[0];
      BundelID = $('.BundleB' + suffix).attr('id');

      if (RowID.indexOf(BundelID) != -1) {
        var BValue = $('#' + RowID).val();
        if (!isNaN(BValue)) {
          Bsum += parseFloat(BValue);
        }
      }
      $('.BundelRowTotal' + BundelID).html(parseFloat(Bsum).toFixed(2));

    });

Here is the conclusion that I get

But I want the result to be as below

Any suggestions please! Thank.

Answer 1

You just have a problem in your Ids Parse try this code instead of yours

Note → changed lines are commented out.

Update

 $("table").each(function() {
 var Bsum = 0;
  var BundelID = '';
$(this).find(".rowTotal").each(function() {

  var RowID = $(this).attr('id');
  //var suffix = RowID.match(/\d+/)[0];
  var suffix = RowID.split("_")[1];

  console.log(suffix)
  BundelID = $('.Bundle' + suffix).attr('id');
  console.log(BundelID);
  if (RowID.indexOf(BundelID) != -1) {
    var BValue = $('#' + RowID).val();
    if (!isNaN(BValue)) {
      Bsum += parseFloat(BValue);
    }
  }
  console.log(Bsum);
  $('.BundelRowTotal' + BundelID).html(parseFloat(Bsum).toFixed(2));

});
});

- Note- > HTML,

Answer 2

: , ,

 $(function(){
       $('table').each(function(){
          var $totalRow = $(this).find('span[class^="BundelRowTotal"]');
          var total = 0.0;
          $(this).find('input.rowTotal').each(function(){
             total += parseFloat($(this).val()) || 0.0;
          });
          $totalRow.html(parseFloat(total).toFixed(2));
       });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr style="background:#2b2e76">
    <th colspan="1" style="padding: 0;">
      <p style="color:white">
        Table One

      </p>
    </th>
    <th>
      <p style="color:white" class="BundleB4936" id="B4936">Total : <span class="BundelRowTotalB4936">1400.00</span></p>
    </th>
  </tr>
  <tr>
    <td>
      <input type="text" value="200.00" name="row_total[]" id="rowtotal11_B4936" class="rowTotal">
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" value="1200.00" name="row_total[]" id="rowtotal12_B4936" class=" rowTotal">
    </td>
  </tr>
</table>
<table>
  <tr style="background:#2b2e76">
    <th colspan="1" style="padding: 0;">
      <p style="color:white">
        Table Two

      </p>
    </th>
    <th>
      <p style="color:white" class="BundleB1027" id="B1027">Total : <span class="BundelRowTotalB1027"></span></p>
    </th>
  </tr>
  <tr>
    <td>
      <input type="text" value="100.00" name="row_total[]" id="rowtotal16_B1027" class="rowTotal">
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" value="250.00" name="row_total[]" id="rowtotal17_B1027" class="rowTotal">
    </td>
  </tr>
</table>

Hide result

Answer 3

var val1 = +$('#rowtotal11_B4936').val();
var val2 = +$('#rowtotal12_B4936').val();
$('.BundelRowTotalB4936').text(val1+val2);

var val3 = +$('#rowtotal16_B1027').val();
var val4 = +$('#rowtotal17_B1027').val();
$('.BundelRowTotalB1027').text(val4+val3);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<table>
  <tr style="background:#2b2e76">
    <th colspan="1" style="padding: 0;">
      <p style="color:white">
        Table One

      </p>
    </th>
    <th>
      <p style="color:white" class="BundleB4936" id="B4936">Total : <span class="BundelRowTotalB4936"></span></p>
    </th>
  </tr>
  <tr>
    <td>
      <input type="text" value="200.00" name="row_total[]" id="rowtotal11_B4936" class="rowTotal">
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" value="1200.00" name="row_total[]" id="rowtotal12_B4936" class=" rowTotal">
    </td>
  </tr>
</table>
<table>
  <tr style="background:#2b2e76">
    <th colspan="1" style="padding: 0;">
      <p style="color:white">
        Table Two

      </p>
    </th>
    <th>
      <p style="color:white" class="BundleB1027" id="B1027">Total : <span class="BundelRowTotalB1027">1750.00</span></p>
    </th>
  </tr>
  <tr>
    <td>
      <input type="text" value="100.00" name="row_total[]" id="rowtotal16_B1027" class="rowTotal">
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" value="250.00" name="row_total[]" id="rowtotal17_B1027" class="rowTotal">
    </td>
  </tr>
</table>

Run codeHide result