JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" name="chk[140]">
<input type="hidden" value="3" name="ctcount[140]">
<input type="hidden" value="Apples" name="catname[140]">


<input type="checkbox" name="chk[142]">
<input type="hidden" value="20" name="ctcount[142]">
<input type="hidden" value="Bananas" name="catname[142]">

<input type="checkbox" name="chk[144]">
<input type="hidden" value="200" name="ctcount[144]">
<input type="hidden" value="Strawberries" name="catname[144]">

<input type="checkbox" name="chk[145]">
<input type="hidden" value="0" name="ctcount[145]">
<input type="hidden" value="Carrots" name="catname[145]">

<br><br>
<button>Submit</button>

JavaScript

$(document).ready(function(){

  $(':button').click(function(){
    var total = 0, done = false;
    $(':checked').each(function(){
      if (!done) {
              
        var catid = $(this).attr('name').replace(/chk\[(\d+)\]/,'$1'); // extract #
        var catval = parseInt( $('input[name=ctcount\[' + catid + '\]]').val(), 10);
        var catnam = $('input[name=catname\[' + catid + '\]]').val();
                
        if (total + catval > 50) {
          alert('Unable to add item as max limit for "' + catnam + '" has reached');
          done = true;
        } else {
          total = total + catval;
        }
      }
   })

   alert( 'The total is ' + total );
      
  });

})