JSFiddle - React, Tailwind, and code Playground

by borisjavier

HTML

<head>
  <!-- CSS de Bootstrap 4
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  -->
  <link rel="stylesheet" href="https://golden-notes.io/vendor/bootstrap/css/bootstrap.min.css">

  <!-- CSS de FontAwesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>


<div class="container-fluid">
                            <div class="row justify-content-center">
                                <div class="col-12 col-sm-12 col-md-12 
                                    col-lg-12 col-xl-12 text-center p-0 mt-3 mb-2">
                                    <div class="px-0 pt-4 pb-0 mt-3 mb-3">
                                        <form id="form">
                                            <ul id="progressbar">
                                                <li class="active" id="step1">
                                                    <strong>Carrega</strong>
                                                </li>
                                                <li id="step2"><strong>Aquece</strong></li>
                                                <li id="step3"><strong>Pirolise</strong></li>
                                                <li id="step4"><strong>Resfria</strong></li>
                                                <li id="step5"><strong>Descarrega</strong></li>
                                            </ul>
                                            <div class="progress">
                                                <div class="progress-bar"></div>
                                            </div> <br>
                                            <input type="hidden" id="progressStatus" value='[{"1":{"inicio":1686268980000},"id":1},{"1":{"inicio":1686593820000},"id":2}]'>
                                            <input type="hidden" id="activePlant" value="1">
                                           ...

CSS

* {
    margin: 0;
    padding: 0
}
  
html {
    height: 100%
}
  
h2{
    color: #2F8D46;
}
#form {
    text-align: center;
    position: relative;
    margin-top: 20px
}
  
#form fieldset {
    background: white;
    border: 0 none;
    border-radius: 0.5rem;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding-bottom: 20px;
    position: relative
}
  
.finish {
    text-align: center
}
  
#form fieldset:not(:first-of-type) {
    display: none
}
  
#form .previous-step, .next-step {
    width: 100px;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 0px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px 10px 0px;
    float: right
}
  
.form, .previous-step {
    background: #616161;
}
  
.form, .next-step {
    background: #2F8D46;
}
  
#form .previous-step:hover,
#form .previous-step:focus {
    background-color: #000000
}
  
#form .next-step:hover,
#form .next-step:focus {
    background-color: #2F8D46
}
  
.text {
    color: #2F8D46;
    font-weight: normal
}
  
#progressbar {
    margin-bottom: 30px;
    overflow: hidden;
    color: lightgrey
}
  
#progressbar .active {
    color: #2F8D46
}
  
#progressbar li {
    list-style-type: none;
    font-size: 15px;
    width: 20%;
    float: left;
    position: relative;
    font-weight: 400
}
  
#progressbar #step1:before {
    content: "1"
}
  
#progressbar #step2:before {
    content: "2"
}
  
#progressbar #step3:before {
    content: "3"
}
  
#progressbar #step4:before {
    content: "4"
}

#progressbar #step5:before {
    content: "5"
}
  
#progressbar li:before {
    width: 50px;
    height: 50px;
    line-height: 45px;
    display: block;
    font-size: 20px;
    color: #ffffff;
    background: lightgray;
    border-radius: 50%;
    margin: 0 auto 10px auto;
    padding: 2px
}
  
#progressbar li:after {
    content: '';
    width: 100%;
    height: 2px;
    background: lightgray;
    position: absolute;
    left: 0;
    top: 25px;
    z-index:...

JavaScript

const selectPlanta = document.getElementById('planta');
            const activePlant = document.getElementById('activePlant');
            const activePlantValue = activePlant.value;
            const spanSel = document.getElementById('sel');
            const mat = JSON.parse(document.getElementById('materiais').value);
            var steps = $("fieldset").length;
            const mater = document.getElementById('material1');
            let material1 = '';

            function setProgressBar(currentStep) {
                current = currentStep;

                var percent = parseFloat((100 / steps) * current);
                percent = percent.toFixed();
                $(".progress-bar").css("width", percent + "%");

                $("fieldset").each(function (index) {
                    if (index + 1 === current) {
                        $(this).show();
                    } else {
                        $(this).hide();
                    }
                });

                $("#progressbar li").each(function (index) {
                    if (index + 1 <= current) {
                        $(this).addClass("active");
                    } else {
                        $(this).removeClass("active");
                    }
                });
                $("#current-step").val(current);
            }

            function updateProgressBar() {
                const arreglo = JSON.parse($('#progressStatus').val());
                const indiceDinamico = ($('#planta').val() == parseInt($('#activePlant').val()))?parseInt($('#activePlant').val()):$('#planta').val();

                const datosEtapa = arreglo.find(objeto => objeto.id === indiceDinamico);

                if (datosEtapa) {
                    const etapas = Object.keys(datosEtapa)
                        .filter(key => key !== 'id')
                        .map(key => ({ id: key, ...datosEtapa[key] }));

                    const maxIdData = etapas.reduce((max, obj) => {
            ...