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?