javascript – I intend to make a visit system for my web site. I am having concerns with the framework

I am developing a visit system for a task. The system is for a repair work solution. I desire the kind to be made with the hiding div system, which is essentially as quickly as the switch is clicked a brand-new div shows up and also the previous one obtains concealed.

I am making this web site as a webapp in flask.
I created the very first div to be the switches which i intend to be the very first area of the kind

<< div id=" step2" course=" formStep">
<> < h2>> Action 2: Select Gadget Firm<.
<< div course=" buttonGroup">
<> < switch course=" optionButton" data-value=" phone">> Phone< < switch course=" optionButton" data-value=" laptop computer">> Laptop computer< < switch course=" optionButton" data-value=" tablet computer">> Tablet computer< < switch course=" optionButton" data-value=" desktop computer">> Desktop computer< < switch course=" optionButton" data-value=" various other">> Various other Repair work<.
<.
<< switch onclick=" prevStep( 1 )">> Back<.
<< switch id=" continueButton" onclick=" nextStep( 3 )" handicapped>> Continue<.
<.

these are the switches when we pick any kind of switch the proceed switch obtains triggered making use of

 feature selectOptionButton( switch) {
const optionButtons = document.querySelectorAll('. optionButton');
optionButtons.forEach( btn => > {
btn.classList.remove(' chosen');
} );

button.classList.add(' chosen');
const continueButton = document.getElementById(' continueButton');
continueButton.removeAttribute(' handicapped');// Make it possible for the Continue switch.
updateDeviceModelOptions();
}

this manuscript and also the following div obtains triggered with this

 const formSteps = document.querySelectorAll('. formStep');.
allow currentStep = 1;.

feature nextStep( following) {
formSteps[currentStep - 1] style.display='none';.
formSteps[next - 1] style.display='block';.
currentStep = following;.
updateStep( following);.
}

feature prevStep( prev) {
formSteps[currentStep - 1] style.display='none';.
formSteps[prev - 1] style.display='block';.
currentStep = prev;.
updateStep( prev);.
}

yet in the 2nd div if the customer pick any kind of choice i desire the alternatives in the 2nd div to be presented appropriately.

eg: if the customer picks phone in the very first div it ought to reveal him the cellular phones we fix like samsung, apple iphone, moto, and so on and also as quickly as they pick the firm of the mobile phone and also as quickly as they click proceed they see the versions of the firm we fix like apple iphone 11, 12, 13

however, for each gadget, each firm the noticeable alternatives ought to be various. If any individual can assist me out with it many thanks.

i attempted making use of the js code

 feature updateDeviceCompanyOptions() {
const deviceType = document.getElementById(' deviceType'). worth;.
const deviceCompany = document.getElementById(' deviceCompany');.
deviceCompany.innerHTML =";.

const firms = {
phone: ['Samsung', 'Apple', 'LG', 'Motorola', 'Others'],.
laptop computer: ['Apple', 'Samsung', 'Acer', 'Asus', 'Dell', 'HP', 'Lenovo', 'Others'],.
tablet computer: ['Apple', 'Samsung'],.
desktop computer: ['Apple', 'Samsung', 'Acer', 'Asus', 'Dell', 'HP', 'Others'],.
various other:[]
};.

firms[deviceType] forEach( firm => > {
const choice = document.createElement(' switch');.
option.classList.add(' optionButton');.
option.textContent = firm;.
option.dataset.value = firm;.
option.addEventListener(' click', feature() {
selectOptionButton( choice);.
} );.
deviceCompany.appendChild( choice);.
} );.
}

yet it is not exercising as i desire reason i desire them to be in the switch style