JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<div class="createfinishedTask">
<div class="form-group taskType">
     <label for="TaskType32" class="col-sm-4 control-label">Aufgaben Art</label>
           <div class="col-sm-8">
              <select class="form-control" id="TaskType32" name="type[]">
                  <optgroup label="DESIGN">
                      <option value="photoshop">PHOTOSHOP</option>
                      <option value="recherche">RECHERCHE</option>
                   </optgroup>
             </select>
             <div class="rangeSliderContainer">
                 <div class="slider">100</div>
                 <span class="value">100</span>%
             </div>
             <input type="hidden" class="hiddenPercentage" name="percentage[]" value="100">
        </div>
</div>
    <div class="form-group">
                            <div class="col-sm-8 col-sm-offset-4">
                                <button class="rangeTrigger btn btn-outline btn-default">Weiterer Type</button>
                            </div>
                        </div>
    </div>

JavaScript

$(document).ready(function() {
    if($('.createfinishedTask').length) {
        console.log('hello');
        clonedTaskAdd = $('.createfinishedTask .taskType').clone();
            manageSliders();

        $('.createfinishedTask').on('click', '.rangeTrigger', function(e) {
            e.preventDefault();
            addSlider();
        });
    }
});


function addSlider() {
    clonedTaskAdd.find('.slider, .value').text('0');
    // clonedTaskAdd.find('.slider').text('0');
    clonedTaskAdd.find('.hiddenPercentage').val('0');
    var rand = makeid();
    clonedTaskAdd.find('label').attr('for', rand);
    clonedTaskAdd.find('select').attr('id', rand);
    clonedTaskAdd.find('.slider').slider();
    $('.createfinishedTask .taskType').last().after(clonedTaskAdd);
    // $('.createfinishedTask .taskType').last().find('.slider').slider();
    manageSliders();
}

function manageSliders() {
    var sliders = $(".rangeSliderContainer .slider");
    var availableTotal = 100;

    sliders.each(function() {
        var init_value = parseInt($(this).text());

        $(this).siblings('.value').text(init_value);

        $(this).empty().slider({
            value: init_value,
            min: 0,
            max: availableTotal,
            range: "max",
            step: 2,
            animate: 0,
            slide: function(event, ui) {

                // Update display to current value
                $(this).siblings('.value').text(ui.value);
                $(this).parent().next('.hiddenPercentage').val(ui.value);

                // Get current total
                var total = 0;

                sliders.not(this).each(function() {
                    total += $(this).slider("option", "value");
                });

                // Need to do this because apparently jQ UI
                // does not update value until this event completes
                total += ui.value;

                var delta = availableTotal - total;

                // Update each...