I have a problem with select options with display: none, block. On PC it works, there is no problem. But on mobile, it also works, but at the second click and after 1-2 seconds. I don't know what is my mistake. I need when the user clicks yes, the place input must be display: block, price input display: none if the user clicks no the place input must be display: none, price input display: block,

My HTML

     <div class="second-tab">
        <div class="form-group">
           <span class="work-span" id="workspan">Work?</span>
               <select id="work" name="work" class="work">
                   <option value="no" selected>No</option>
                    <option value="yes">Yes</option>
                </select>

         </div>
       <div class="form-group">
           <span id="label-price" class="label-price work-span">Price</span>
            <input type="text" id="price" class="price" />
       </div>
       <div class="form-group">
          <span class="label-place work-span">Place</span>
         <input type="text" id="place" name="place" class="place" />
     </div>
    <div class="form-group">
    <button type="submit">Submit </button>
  </div>
     </div>

My JS

    work.addEventListener("click", (e) => {

            if (e.target.value == "no") {
                priceInput.style.display = "block";
                labelPrice.style.display = "block";
                placeInput.style.display = "none";
                labelPlace.style.display = "none";
            } else if (e.target.value == "yes") {
                priceInput.style.display = "none";
                labelPrice.style.display = "none";
                placeInput.style.display = "block";
                labelPlace.style.display = "block";
            }
        });

My CSS

#label-price {
    display: block;
}

#workspan {
    display: block;
}

.place {
    display: none;
}

.work-span {
    display: none;
}