JavaScript Access a Particular Div Without Changing Class Name

I have a simple requirement: Based on the response of a user on a particular yes no question, show him another question.

The issue is I am using Bootstrap forms so all my div classes are named form-group, and this is the problem: If I rename the class to say, form-group1, my website shape gets disconfigured...some form items appear out of position.

<script src="http://code.jquery.com/jquery-latest.js" />
<script>
    $(document).ready(function () {
        $(".form-group1").hide();
        $("#r1").click(function () {
            $(".form-group1").show();
        });
        $("#r2").click(function () {
            $(".form-group1").hide();
        });
    });
</script>

<form action="">
    <input type="radio" name="gender" id="r1" value="female" onClick="getResults()">Single&nbsp;
    <input type="radio" name="gender" id="r2" value="male">Married

    <!-- Textarea -->
    <div class="form-group1">
        <label class="col-md-4 control-label" for="q2">By When is your marriage scheduled?</label>
        <div class="col-md-4">
            <textarea class="form-control" id="q2" name="Q2" placeholder="e.g. FY18 Q4"></textarea>
        </div>
    </div>

    <br />
    <br />
    <input type="submit" value="Submit">
</form>

So my question is how can I access the particular div that contains the text-area without changing the class-name?

An element can have as many classes as you like.

So just as an alternative, rather than changing the class name, you can also add another class (separated by a space). That way your bootstrap styles are still applied (since you still have the form-group class), but you can also add your own.

<div class="form-group custom-form-group">
  <label class="col-md-4 control-label" for="q2">
    By When is your marriage scheduled?
  </label>
  <div class="col-md-4">
    <textarea class="form-control" id="q2" name="Q2" placeholder="e.g. FY18 Q4"></textarea>
  </div>
</div>

Then in your script you can target the custom-form group class and it should work as you intended.

You can access the div container by first accessing the ID you know and then traverse:

<input type="radio" name="gender" id="r1" data-div="q2" value="female">Female&nbsp;
<input type="radio" name="gender" id="r2" data-div="q2" value="male">Male

$("[name=gender]").on("click",function() {
  $("#"+$(this).data("div")) // textarea with known ID from data attribute
    .closest("div.form-group") // the container
    .toggle(this.value=="male"); // show or hide 
})

You can use DOM relationship to target the desired element, You can traverse up to common ancestor using .closest() then use .find() to get the target element.

$(this).closest("form").find(".form-group").show();

$(document).ready(function() {
  $(".form-group").hide();
  $("#r1").click(function() {
    $(this).closest("form").find(".form-group").show();
  });
  $("#r2").click(function() {
    $(this).closest("form").find(".form-group").hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
  <input type="radio" name="gender" id="r1" value="female">Single&nbsp;
  <input type="radio" name="gender" id="r2" value="male">Married

  <!-- Textarea -->
  <div class="form-group">
    <label class="col-md-4 control-label" for="q2">By When is your marriage scheduled?</label>
    <div class="col-md-4">
      <textarea class="form-control" id="q2" name="Q2" placeholder="e.g. FY18 Q4"></textarea>
    </div>
  </div>

  <br><br><input type="submit" value="Submit">
</form>