I’m trying to develop an inspection form where a ‘corrective action’ prompt is fired when the ‘X’ radio is selected rather than the ‘checkmark’ radio.

I have used event listeners on both buttons to fire the prompt when necessary.

What i’m trying to accomplish is to use this function over multiple DIV’s rather than write specific event listeners for each section (this would result in a ton of code as I intend to have a lot of points on the inspection form). I’m hoping there is a way to share the ID’s for all the sections, and attach the event listeners to ALL ID’s, but only fire the ‘corrective action’ prompt within the parent DIV the radio was selected. (I hope this makes sense).

note the inputs for the Registration Line share the same ID as the inputs in the Insurance Line

                                                **<!--Registration Line-->**
          <div class="accordion-body vehicleBody border border-light-subtle">
                                                
            <h3 id="registration" class="mx-3">Current / Valid Vehicle Registration
                <span>
                    <input type="radio" class="btn-check reg" name="registration" id="success" autocomplete="off" >
                    <label class="btn btn-outline-success rounded-circle" for="success"><i class="fa-solid fa-check"></i></label>

                    <input  type="radio" class="btn-check" name="registration" id="danger" autocomplete="off" />
                    <label class="btn btn-outline-danger rounded-circle ms-3" for="danger"><i class="fa-solid fa-x"></i></label>
                </span>
            </h3> 
            <div class="ms-3" id="correctiveAction">
                <p class="text-center" style="font-weight: 400; padding: 10px; color: crimson; text-decoration: underline;">Corrective Action Required!</p>

                <div class="form-floating correctiveAction" >
                    <textarea class="form-control" id="floatingTextarea2" style="height: 100px"></textarea>
                    <label for="floatingTextarea2">Please determine appropriate corrective action.</label>
                  </div>
                  <div class="input-group mt-2 ">
                    <span class="input-group-text"><i class="bi bi-person-fill"></i></span>
                    <span class="input-group-text infoHead" style="width:174px;">Responsible Person:</span>
                      <input type="text" class="form-control" aria-label="employee name" aria-describedby="employee name">
                    </div>
            </div>
            </div>

                                                <!--Insurance Line-->
        <div class="accordion-body vehicleBody border border-light-subtle">
                               
            <h3 id="insurance" class="mx-3">Current / Valid Insurance
                <span>
                    <input type="radio" class="btn-check" name="insurance" id="success" autocomplete="off">
                    <label class="btn btn-outline-success rounded-circle" for="success"><i class="fa-solid fa-check"></i></label>

                    <input type="radio" class="btn-check" name="insurance" id="danger" autocomplete="off">
                    <label class="btn btn-outline-danger rounded-circle ms-3" for="danger"><i class="fa-solid fa-x"></i></label>
                </span>
             </h3> 
             <div class="ms-3" id="correctiveAction">
                <p class="text-center" style="font-weight: 400; padding: 10px; color: crimson; text-decoration: underline;">Corrective Action Required!</p>

                <div class="form-floating correctiveAction" >
                    <textarea class="form-control" id="floatingTextarea2" style="height: 100px"></textarea>
                    <label for="floatingTextarea2">Please determine appropriate corrective action.</label>
                  </div>
                  <div class="input-group mt-2 ">
                    <span class="input-group-text"><i class="bi bi-person-fill"></i></span>
                    <span class="input-group-text infoHead" style="width:174px;">Responsible Person:</span>
                      <input type="text" class="form-control" aria-label="employee name" aria-describedby="employee name">
                    </div>
            </div>
        </div>  

JS

const ca = document.getElementById("success");
const nc = document.getElementById("danger")
var ca1 = document.getElementById("correctiveAction");
nc.addEventListener("click", function(){
   ca1.style.display="block";
})
ca.addEventListener("click", function(){
    ca1.style.display="none"
})

I’ve attempted to find ways to target the input and to fire within the parent div only but i’m not finding a way to do so.

Using the JS i have included only fires the ‘corrective action’ on the Registration div even when the ‘X’ is clicked for the Insurance div.