Multiple Progress Bars

Create a stacked progress bar by placing multiple bars into the same div with class="progress":

Pending
Approved
Verified
Worked On
Ready
******************************************************************************************************* WORKING TRASCRIPT PROCESSOR ******************************************************************************************************* if ($action == 'transcriptApplication') { // Processing uploaded file $uploadDirectory = '../uploads/'; // Directory to save uploaded files $uploadedFileName = $_FILES['receipt_path']['name']; $uploadedFilePath = $uploadDirectory . $uploadedFileName; if (move_uploaded_file($_FILES['receipt_path']['tmp_name'], $uploadedFilePath)) { // File uploaded successfully, continue with database insertion // Extracting form data extract($_POST); $created_at = (new DateTime())->format('Y-m-d'); $query = "INSERT INTO tbltranscript_requests (rqst_id, stuid, name, email, level, prog, phone, purpose, ogname, ogcontact, ogphone, ogemail, ogpostal, created_at, deliv_mode, receipt_path, status) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?,?,?,?)"; $stmt = $conn->prepare($query); // Generating request ID function generateRandomString($length) { $characters = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'; $randomString = ''; for ($i = 0; $i < $length; $i++) { $randomString .= $characters[rand(0, strlen($characters) - 1)]; } return $randomString; } $rqst_id = $stuid . '-TRANS-' . generateRandomString(5); // Function to generate random string of specified length $stmt->bind_param('sssssssssssssssss', $rqst_id, $stuid, $name, $email, $level, $prog, $phone, $purpose, $ogname, $ogcontact, $ogphone, $ogemail, $ogpostal, $created_at, $deliv_mode, $uploadedFilePath, $status); if ($stmt->execute()) { echo ' '; } else { echo "Error: " . $stmt->error; } $stmt->close(); } else { // Failed to move uploaded file echo "Error: Failed to upload file."; } $conn->close(); } ********************************************************************************** WORKING AJAX METHOD FOR STATUS UPDATE ********************************************************************************** $(".dfaIntroApprove").click(function (e) { e.preventDefault(); let id = $(this).data('id') $.ajax({ type: "post", url: "../../backend/scripts/ajax.php?action=dfaIntroApprove&id=" + id, success: function (response) { // alert(response) if (response == 1) { alert('REQUEST HAS BEEN VERIFIED') location.reload(); }else { console.log("Failed to approve: ", response); } } }); }); $(".dfaIntroReject").click(function (e) { e.preventDefault(); let id = $(this).data('id') $.ajax({ type: "post", url: "../../backend/scripts/ajax.php?action=dfaIntroReject&id=" + id, success: function (response) { // alert(response) if (response == 1) { alert('REQUEST HAS BEEN REJECTED') location.reload(); }else { console.log("Failed to approve: ", response); } } }); }); *********************************************************************************** HIDING INPUT FIELDS BASED ON DROPDOWN SELECTION *********************************************************************************** //SELECTION FROM THE FRONTEND
document.getElementById('delivery-mode').addEventListener('change', function() { var postalAddressField = document.getElementById('postal-address-field'); var physicalAddressField = document.getElementById('physical-address-field'); if (this.value === 'post') { postalAddressField.classList.remove('hidden'); physicalAddressField.classList.add('hidden'); } else if (this.value === 'courier') { physicalAddressField.classList.remove('hidden'); postalAddressField.classList.add('hidden'); } else { postalAddressField.classList.add('hidden'); physicalAddressField.classList.add('hidden'); } });