JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <!--OSC 1 START-->
    <input type="button" id="play_pause_osc1" value="Play Osc1" />
    <br/>
    <label for="cur_vol_osc1">Current Volume:</label>
    <input type="text" id="cur_vol_osc1" class="txt_box" />
    <div id="osc1_vol" class="slider"></div>
    <label for="cur_pitch_osc1">Current Pitch:</label>
    <input type="text" id="cur_pitch_osc1" class="txt_box" />
    <div id="osc1_pitch" class="slider"></div>
    <label for="cur_detune_osc1">Current Detune:</label>
    <input type="text" id="cur_detune_osc1" class="txt_box" />
    <div id="osc1_detune" class="slider"></div>
    <label for="cur_wave_osc1">Current Waveform:</label>
    <input type="text" id="cur_wave_osc1" class="txt_box" />
    <div id="osc1_wave" class="slider"></div>
    <!--OSC 2 START-->
    <input type="button" id="play_pause_osc2" value="Play Osc2" />
    <br/>
    <label for="cur_vol_osc2">Current Volume:</label>
    <input type="text" id="cur_vol_osc2" class="txt_box" />
    <div id="osc2_vol" class="slider"></div>
    <label for="cur_pitch_osc2">Current Pitch:</label>
    <input type="text" id="cur_pitch_osc2" class="txt_box" />
    <div id="osc2_pitch" class="slider"></div>
    <label for="cur_detune_osc2">Current Detune:</label>
    <input type="text" id="cur_detune_osc2" class="txt_box" />
    <div id="osc2_detune" class="slider"></div>
    <label for="cur_wave_osc2">Current Waveform:</label>
    <input type="text" id="cur_wave_osc2" class="txt_box" />
    <div id="osc2_wave" class="slider"></div>
    <!--OSC 3 START-->
    <input type="button" id="play_pause_osc3" value="Play Osc3" />
    <br/>
    <label for="cur_vol_osc3">Current Volume:</label>
    <input type="text" id="cur_vol_osc3" class="txt_box" />
    <div id="osc3_vol" class="slider"></div>
    <label for="cur_pitch_osc3">Current Pitch:</label>
    <input type="text" id="cur_pitch_osc3" class="txt_box" />
    <div id="osc3_pitch" class="slider"></div>
    <label for="cur_detune_osc3">Current Detune:</label>
...

CSS

.slider {
    width: 28%;
}
.txt_box {
    border: none;
    outline: none;
    display: inline;
}
.ui-slider .ui-slider-handle {
    width: 5px;
    margin-left: auto;
    margin-right: auto;
    outline: none;
}

JavaScript

//WEB AUDIO SET UP//
//used start web audio
var ctx = new webkitAudioContext();
speakers = ctx.destination;
var osc1= ctx.createOscillator();
var osc2= ctx.createOscillator();
var osc3= ctx.createOscillator();

$(document).ready(function () {

    //WAVEFORM OBJECTS - used to set the value of "cur_wave_osc" under Waveform sliders.//
    var wF = {
        0: "Sine",
        1: "Square",
        2: "Sawtooth",
        3: "Triangle"
    };
    //PLAY_PAUSE BUTTONS - used to play & pause the oscillators.//
    //OSC1 PLAY_PAUSE//
    $('#play_pause_osc1').click(function () {
        if ($(this).val() == "Play Osc1") {
            $(this).val("Pause");
            oscillator1Start();
        } else {
            $(this).val("Play Osc1");
            osc1.disconnect();
        }
    });
    //OSC2 PLAY_PAUSE//
    $('#play_pause_osc2').click(function () {
        if ($(this).val() == "Play Osc2") {
            $(this).val("Pause");
            oscillator2Start();
        } else {
            $(this).val("Play Osc2");
            osc2.disconnect();
        }
    });
    //OSC3 PLAY_PAUSE//
    $('#play_pause_osc3').click(function () {
        if ($(this).val() == "Play Osc3") {
            $(this).val("Pause");
            oscillator3Start();
        } else {
            $(this).val("Play Osc3");
            osc3.disconnect();
        }
    });
    //GAIN SLIDERS - used for controlling osc volume.//
    //OSC1_GAIN//
    $(function () {
        $("#osc1_vol").slider({
            min: 0,
            max: 1,
            value: 0.5,
            step: 0.01,
            slide: function (event, ui) {
                $("#cur_vol_osc1").val(ui.value);
                gainNode1.gain.value = $("#cur_vol_osc1").val();
            }
        });
        $("#cur_vol_osc1").val($("#osc1_vol").slider("value"));
    });
    //OSC2_GAIN//
    $(function () {
        $("#osc2_vol").slider({
            min: 0,
            max: 1,
            value: 0.5,
            step: 0.01,
         ...