JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td colspan="3">
            Choose what percentage of earnings you would like to see delegates assign to each potential fund usage method.
            
            After a profile is selected that adds up to 100% you will be able to save your preferences.  Your selections will be averaged with other submissions to generate a report for delegates that should show where shareholders would like funds spent.
        </td>
    </tr>
    <tr><th>Fund Usage 1</th><th>Fund Usage 2</th><th>Fund Usage 3</th></tr>
    <tr>
        <td>
            %<input type="text" id="slider1input" class="sliderInput" style="border:0; color:#f6931f; font-weight:bold;" value="0" disabled>
            <div id="slider1" class="slider"></div>
        </td>
        <td>
            %<input type="text" id="slider2input" class="sliderInput" style="border:0; color:#f6931f; font-weight:bold;" value="0" disabled>
            <div id="slider2" class="slider"></div>
        </td>
        <td>
            %<input type="text" id="slider3input" class="sliderInput" style="border:0; color:#f6931f; font-weight:bold;" value="0" disabled>
            <div id="slider3" class="slider"></div>
        </td>
    </tr>
    <tr>
        <td colspan="3">
            <div id="slidersTot" style="width:100%;text-align:center;">0</div>
        </td>
    </tr>
    <tr>
        <td colspan="3">
            <input type="submit" value="Save" style="width:100%;text-align:center;" />
        </td>
    </tr>
</table>

CSS

.slider {
    height:120px; float:left; margin:15px
  }

td, th {
    border:1px solid black;
    padding:20px;
}

JavaScript

$(function() {
    $('input[type="submit"]').attr('disabled','disabled');
    $( ".slider" ).each(function() {

      $( this ).empty().slider({
        orientation: "vertical",
        value: 0,
        min: 0,
        max: 100,
        step: 5,
        slide: function( event, ui ) {
            var slideInput = $(this).attr("id") + "input";
            $( "#" + slideInput).val(ui.value);
            var slideTotal = getTotal($(this).attr("id"), ui.value);
            $("#slidersTot").html(slideTotal);
            if (slideTotal == 100) {
                $('input[type="submit"]').removeAttr('disabled');
            } else {
                $('input[type="submit"]').attr('disabled','disabled');
            }
        }
      });
        
    });
    
  });
function getTotal(thisSlideId, thisValue){
  var total = 0;
  $( ".slider" ).each(function() {
      if (thisSlideId == $(this).attr("id")) {
          total += thisValue;
      } else {
          total += $( this ).slider( "value" );
      }
  });
  return total;
}