JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sliders" style="width: 100px">
</div>

CSS

div.slider {
    margin-top: 5px;
    margin-bottom: 30px;
}

JavaScript

var numberOfSliders = Math.floor(Math.random()*5) + 2;

for (var i=0; i < numberOfSliders; i++) {
    // Insert HTML
    var html = '<div>Slider '+i+'</div>'
              +'<div class="slider" id="slider-'+i+'"></div>';
    
    $('#sliders').append(html);
    //document.getElementById('sliders').innerHTML += html;
    
    // Create Slider
    $('#slider-'+i).slider({
        value: Math.floor(Math.random()*10) + 1,
        min: 0,
        max: Math.floor(Math.random()*5) + 10,
        step: 1,
        orientation: "horizontal",
        range: "min",
        animate: true
    });
}

console.log(document.getElementById('sliders').innerHTML);