JSFiddle - React, Tailwind, and code Playground

by TrueBlueAussie

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() {
    var clone = clonedTaskAdd.clone();
    clone.find('.slider, .value').text('0');
    // clonedTaskAdd.find('.slider').text('0');
    clone.find('.hiddenPercentage').val('0');
    var rand = makeid();
    clone.find('label').attr('for', rand);
    clone.find('select').attr('id', rand);
    clone.find('.slider').slider();
    $('.createfinishedTask .taskType').last().after(clone);
    // $('.createfinishedTask .taskType').last().find('.slider').slider();
    manageSliders();
}

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

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

        // This value comes from the text element, but only if not converted to a slider
        if ($this.find('.ui-slider-handle').length) {
            var init_value = $this.slider("option", "value");
        } else {
            var init_value = ~~$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) {
                var $slider = $(this);
                // Update display to current value
                $slider.siblings('.value').text(ui.value);
                $slider.parent().next('.hiddenPercentage').val(ui.value);

                // Get current total
                var total = 0;

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