Select value within form select

I want to create a form field with select, that shows additional fields when a certain field is selected.

<div class="col-md-12">
                      <label for="event" class="form-label"
                        >Habt ihr schon nähere Infos zu eurem Event</label
                      >
                      <select id="event" class="form-select">
                        <option
                          value="choose"
                          selected
                          aria-label="Disabled select example"
                          disabled
                        >
                          Bitte auswählen
                        </option>
                        <option value="no">Nein</option>
                        <option value="yes">Ja</option>
                      </select>
                    </div>

                    <div class="col col-md-4 extended">
                      <label for="eventtype" class="form-label"
                        >Art der Veranstaltung</label
                      >
                      <input type="text" class="form-control" id="eventtype" />
                    </div>
                    <div class="col col-md-4 extended">
                      <label for="guests" class="form-label"
                        >Anzahl Gäste</label
                      >
                      <select id="guests" class="form-select">
                        <option
                          selected
                          aria-label="Disabled select example"
                          disabled
                        >
                          Bitte auswählen
                        </option>
                        <option>30 - 100</option>
                        <option>100 - 200</option>
                        <option>mehr als 200</option>
                      </select>
                    </div>
                    <div class="col col-md-4 extended">
                      <label for="duration" class="form-label"
                        >Auftrittsdauer</label
                      >
                      <input type="text" class="form-control" id="duration" />
                    </div>
                    <div class="col col-md-6 extended">
                      <label for="place" class="form-label">Ort</label>
                      <input type="text" class="form-control" id="place" />
                    </div>
                    <div class="col col-md-6 extended">
                      <label for="date" class="form-label">Datum</label>
                      <input type="date" class="form-control" id="date" />
                    </div>

All the divs with the class “.extended” should hide, when “Nein” is selected.

I wrote that JavaScript but somehow, the selValue always only gives back the value of “choose”

var Extended = document.querySelectorAll(".extended")
var selObj = document.getElementById("event");
var selValue = selObj.options[selObj.selectedIndex].value;

  console.log(selValue)

if (selValue === "no") {
Extended.forEach(el=>el.classList.add("visually-hidden"));
}

I read certain posts, how to get values from select and this is what I found, but somehow it doesn’t work.
I would appreciate any help, that shows me, where my mistake is.