JavaScript

const searchParams = new URLSearchParams(location.search);
for (const [key, value] of searchParams) {
    let element = document.getElementById(key);
    if (element) {
        element.value = value;
    }
    else {
        console.warn("Unknown element:", key, element);
    }
}

<script>
const searchParams = new URLSearchParams(location.search);
for (const [key, value] of searchParams) {
    let element = document.getElementById(key);
    if (element) {
        element.value = value;
    }
    else {
        console.warn("Unknown element:", key, element);
    }
}
</script>

<div class='dropdown-container row p-4'>
    <select>
        <option class='dropdown'>level-1</option>
        <option class='dropdown'>level-2</option>
        <option class='dropdown'>level-3</option>
        <option class='dropdown'>level-4</option>
        <option class='dropdown'>level-5</option>
        <option class='dropdown'>level-6</option>
    </select>
</div>

const searchParams = new URLSearchParams(location.search);
const elements = document.getElementsByClassName("dropdown");
let index = 0;

for (const [key, value] of searchParams) {
    let element = elements[index];
    element.text = value;
    index++;
}

$("#closing-time").keyup(function(){

$(function(){ 
$("#closing-time").keyup(function(){
	var openingTime = $("#openingTime").val();
	var closingTime = $("#closingTime").val();
     $("hoursOpen").html(closingTime-openingTime);
	return hoursOpen.html;

$("hoursOpen")

$("#hoursOpen")

$(function(){
    // Convert either "HH.mm" or "HH:mm" to the number of minutes since midnight
    var parseMinutes = function(value){
        var parts = value.split(/[.:]/g);
        switch (parts.length) {
            case 1: {
                return parseFloat(parts[0]) * 60;
            }
            case 2: {
                var hours = parseFloat(parts[0]);
                var minutes = parseFloat(parts[1]);
                return (hours * 60) + minutes;
            }
            default: {
                return 0;
            }
        }
    };
    
    // Format a number of minutes as "HH:mm"
    var formatMinutes = function(minutes){
        var hours = Math.floor(minutes / 60);
        minutes %= 60;
        
        return hours.toString().padStart(2, '0') + ':' + minutes.toString().padStart(2, '0');
    };
    
    var updateHoursOpen = function(){
        var openingTime = $("#opening-time").val();
        var closingTime = $("#closing-time").val();
        
        var openingMinutes = parseMinutes(openingTime);
        var closingMinutes = parseMinutes(closingTime);
        var minutesOpen = closingMinutes - openingMinutes;
        
        // If closing is before opening, the time spans midnight. Add a day's worth of minutes:
        if (minutesOpen < 0) {
            minutesOpen += 1440;
        }
        
        var hoursOpen = formatMinutes(minutesOpen);
        $("#hoursOpen").val(hoursOpen);
        return hoursOpen;
    };
    
    // Update the hours when either input is changed:
    $("#opening-time, #closing-time").keyup(updateHoursOpen);
});

<div class="opening-day">
    <p>Monday</p>
    <p>
        <label>
            Opening:
            <input type='text' class='opening-time' value='00:00'>
        </label>
    </p>
    <p>
        <label>
            Closing:
            <input type='text' class='closing-time' value='00:00'>
        </label>
    </p>
    <p>
        Result:
        <input type='text' class='hours-open' value='00:00' readonly>
    </p>
</div>

var updateHoursOpen = function($div){
    var openingTime = $div.find(".opening-time").val();
    var closingTime = $div.find(".closing-time").val();
    
    var openingMinutes = parseMinutes(openingTime);
    var closingMinutes = parseMinutes(closingTime);
    var minutesOpen = closingMinutes - openingMinutes;
    if (minutesOpen < 0) {
        minutesOpen += 1440;
    }
    
    var hoursOpen = formatMinutes(minutesOpen);
    $div.find(".hours-open").val(hoursOpen);
    return hoursOpen;
};

$(".opening-day").on("keyup", ".openingtime, .closing-time", function(){
    var $div = $(this).closest(".opening-day");
    updateHoursOpen($div);
});