allow hide/show on div to only work within its radio group and not affect the other radio groups in the same form

so I have this form whereby there are 3 radio groups which hides and shows its own set of divs depending on what is selected.

the problem is that the code I have right now hides the radio content divs across all the 3 radio groups. how do I go about solving this?

Ideally the contents will all “Yes” content will show when form loads, and when someone selects “No” in question1, radioContentOne hides, and radioContentTwo will appear.

currently when I select “No” in question 1. radioContentOne, three, four, five, six hides. I am pretty new to jquery and not sure where i went wrong.

<div class="row">
  <div class="col-lg-12">
    <div class="form-group">
        <label>question 1<label>
        <div class="custom-radio-checkbox d-inline-block">
            <div class="radio-input>
                  <input name="radioGroup1" type="radio" id="radio-no-border-inline-7" data-toggle="collapse" value="radioContentOne" checked>
                  <label for="radio-no-border-inline-1">Yes</label>     
            </div>
        </div>
        <div class="custom-radio-checkbox d-inline-block">
             <div class="radio-input>
                  <input name="radioGroup1" type="radio" id="radio-no-border-inline-8" data-toggle="collapse" value="radioContentTwo">
                  <label for="radio-no-border-inline-2">No</label>    
             </div>
        </div>
    </div>
</div>

<div class="row">
      <div class="col-lg-12">
        <div class="form-group">
            <label>question 2<label>
            <div class="custom-radio-checkbox d-inline-block">
                <div class="radio-input>
                      <input name="radioGroup2" type="radio" id="radio-no-border-inline-7" data-toggle="collapse" value="radioContentThree" checked>
                      <label for="radio-no-border-inline-1">Yes</label>     
                </div>
            </div>
            <div class="custom-radio-checkbox d-inline-block">
                 <div class="radio-input>
                      <input name="radioGroup2" type="radio" id="radio-no-border-inline-8" data-toggle="collapse" value="radioContentFour">
                      <label for="radio-no-border-inline-2">No</label>    
                 </div>
            </div>
        </div>
    </div>
 </div>

<div class="row">
      <div class="col-lg-12">
        <div class="form-group">
            <label>question 3<label>
            <div class="custom-radio-checkbox d-inline-block">
                <div class="radio-input>
                      <input name="radioGroup3" type="radio" id="radio-no-border-inline-7" data-toggle="collapse" value="radioContentFive" checked>
                      <label for="radio-no-border-inline-1">Yes</label>     
                </div>
            </div>
            <div class="custom-radio-checkbox d-inline-block">
                 <div class="radio-input>
                      <input name="radioGroup3" type="radio" id="radio-no-border-inline-8" data-toggle="collapse" value="radioContentSix">
                      <label for="radio-no-border-inline-2">No</label>    
                 </div>
            </div>
        </div>
    </div>
 </div>


<div class="radioContentOne radioOption">content1</div>
<div class="radioContentTwo radioOption">content2</div>


<div class="radioContentThree radioOption">content3</div>
<div class="radioContentFour radioOption">content4</div>

<div class="radioContentFive radioOption">content5</div>
<div class="radioContentSix radioOption">content6</div>



$(document).ready(function(){
    $("[class^='radioGroup']").click(function(){
        var inputValue = $(this).attr("value");
        var targetBox = $("." + inputValue);
        $('.radioOption').not(targetBox).hide();
        $(targetBox).show();
    });
});

Answer

At the moment you are targeting all items within the HTML in order to only target items within the clicked group you can use the .parents selector to find a parent to then search for the related items. https://api.jquery.com/parents/

$(document).ready(function(){
    $("[class^='radioGroup']").click(function(){
        var inputValue = $(this).attr("value");
        var parents = $(this).parents(".form-group");
        var targetBox = parents.find("." + inputValue);
        parents.find('.radioOption').not(targetBox).hide();
        parents.find(targetBox).show();
    });
});