How to display additional input field after select a specific select element

 

//Here is Select Menu 

   <label for="position">Position</label>

            <select name="position_id" id="position" onchange="toggleExtraField()">

                <option value="Select Position">Select Position</option>

                @foreach ($allpositions as $position)

                    @if ($position->status == 1)

                        <option value="{{ $position->id }}">{{ $position->title }}</option>

                    @endif

                @endforeach

            </select>

//section code which want to display after select Driving License

<div class="imageinput4" style="display:none;">

                <div class="">

                    <div class="imagetopheading">Driving License</div>

                    <img src="{{ asset('license.jpg') }}" alt="Upload" width="60" class="custom-file-upload"

                        id="image-uploadlicense">

                </div>

                <div class="">

                    <input type="file" name="applicant_driving_lisence" id="form-field-applicantlicense"

                        class="{{ $errors->has('applicant_driving_lisence') ? 'error' : '' }}" aria-required="true"

                        value="{{ old('applicant_driving_lisence') }}">

                    @error('applicant_driving_lisence')

                        <p class="erromessage">{{ $message }}</p>

                    @enderror

                </div>

            </div>

//js code

<script>

function toggleExtraField() {

    var positionSelect = document.getElementById("position");

    var extraField = document.querySelector(".imageinput4");

    // Get the selected option's text

    var selectedOptionText = positionSelect.options[positionSelect.selectedIndex].text;

    // Check if the selected option is "Bike Rider"

    if (selectedOptionText === "Bike Rider") {

        console.log("Bike Rider selected");

        extraField.style.display = "block"; // Show the extra field

    } else {

        console.log("Bike Rider not selected");

        extraField.style.display = "none"; // Hide the extra field

    }

}

</script>