JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
 <table border='0' style="width:500px;">
        <tr><td style="width:75px;">Var 1</td><td style="width:350px;"><div id="slider0" data-id='0'></div></td><td style="width:30px;"><input type="text" id="amount0" readonly value='20.00' style="width:40px;border:0; color:#f6931f; font-weight:bold;"></td><td><button id='Lock0' data-buttonid='0'></td></tr>
        <tr><td style="width:75px;">Var 2</td><td style="width:350px;"><div id="slider1" data-id='1'></div></td><td style="width:30px;"><input type="text" id="amount1" readonly value='20.00' style="width:40px;border:0; color:#f6931f; font-weight:bold;"></td><td><button id='Lock1' data-buttonid='1'></td></tr>
        <tr><td style="width:75px;">Var 3</td><td style="width:350px;"><div id="slider2" data-id='2'></div></td><td style="width:30px;"><input type="text" id="amount2" readonly value='20.00' style="width:40px;border:0; color:#f6931f; font-weight:bold;"></td><td><button id='Lock2' data-buttonid='2'></td></tr>
        <tr><td style="width:75px;">Var 4</td><td style="width:350px;"><div id="slider3" data-id='3'></div></td><td style="width:30px;"><input type="text" id="amount3" readonly value='20.00' style="width:40px;border:0; color:#f6931f; font-weight:bold;"></td><td><button id='Lock3' data-buttonid='3'></td></tr>
        <tr><td style="width:75px;">Var 5</td><td style="width:350px;"><div id="slider4" data-id='4'></div></td><td style="width:30px;"><input type="text" id="amount4" readonly value='20.00' style="width:40px;border:0; color:#f6931f; font-weight:bold;"></td><td><button id='Lock4' data-buttonid='4'></td></tr>
    </table>

JavaScript

$(function() {

    var locked = [];
    var slider = [];
    var i;
    for (i = 0; i < 5; i++) {
        $( "#slider" + i ).slider({
              range: "max",
              min: 0,
              max: 100,
              step: 0.01,
              value: 20,
              slide: function( event, ui ) {     
                  var id = $(this).data('id');
                  
                $( "#amount" + id ).val( ui.value );
                  
              }
            });
            $( "#amount" + i ).val( $( "#slider-range-max" ).slider( "value" ) );
            $( "#amount" + i ).val(20.00);

            locked[i] = false;

            $("#Lock" + i).button({ 
                icons: {primary:'ui-icon-locked'},
                text: false 
                    }).click(function( event ) {
                        var id = $(this).data('buttonid');
                
                console.log($(this));
                        if(locked[id] == false){
                            $(this).button("option", { 
                                icons: { primary: 'ui-icon-unlocked'  }
                            });

                            locked[id] = true;

                        } else if(locked[id] == true){ 
                            $(this).button("option", { 
                                icons: { primary: 'ui-icon-locked'  }
                            });

                            locked[id] = false;
                        }
                    });
    }
  });