How to add the text “correct answer” when radio button is clicked?

Question

Here is my code:

          <!-- For Multiple Choose (Radio Button) -->
    <div class="col-sm-12 radiobutton">
        <div class="col-sm-5">
            <div class="form-group">
                <div class="radio radio-replace color-green">
                            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
                            <label><b>A</b></label>
                        </div>
                <textarea class="form-control fortiny" name="area2" cols="1" rows="1" style="height: 100px;" ></textarea>
            </div>
        </div>
        <div class="col-sm-5">
            <div class="form-group">
                <div class="radio radio-replace color-green">
                            <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                            <label><b>B</b></label>
                        </div>
                <textarea class="form-control fortiny" name="area2" cols="1" rows="1" style="height: 100px;" ></textarea>
            </div>
        </div>
        <div class="col-sm-5">
            <div class="form-group">
                <div class="radio radio-replace color-green">
                            <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3">
                            <label><b>C</b></label>
                        </div>
                <textarea class="form-control fortiny" name="area2" cols="1" rows="1" style="height: 100px;" ></textarea>
            </div>
        </div>
        <div class="col-sm-5">
            <div class="form-group">
                <div class="radio radio-replace color-green">
                            <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3">
                            <label><b>D</b></label>
                        </div>
                <textarea class="form-control fortiny" name="area2" cols="1" rows="1" style="height: 100px;" ></textarea>
            </div>
        </div>
    </div>
    <!-- End of Multiple Choose (Radio Button) -->

This is the Desired output, when I click the radio button.

Answer 1

As you are new in SO first of Welcome to SO. Always remember to provide something you already tried like code samples. I have prepared this to give an idea of how to implement the thing you want. This will alert user if he choose the correct answer or wrong answer.

$(document).ready(function(){
  $('input[name=answer]').change(function(){
    if($('input[name=answer]:checked').val() === "CORRECT") {
      alert('You have selected the correct answer!');
    } else {
      alert('You have selected the wrong answer!');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Choose correct answer from below -</p>
<input type="radio" name="answer" value="WRONG" /> A
<input type="radio" name="answer" value="CORRECT" /> B
<input type="radio" name="answer" value="WRONG" /> C
<input type="radio" name="answer" value="WRONG" /> D

UPDATE

Taking from your updated code -

$(document).ready(function(){
  $('input[name=optionsRadios]').change(function(){
     $('.alert').remove();
    if($('input[name=optionsRadios]:checked').val() === "option1") {
      $(this).parent().append('<span class="alert green">&#10004 Correct Answer</span>');
    } else {
      $(this).parent().append('<span class="alert red">&#10006 Wrong Answer</span>');
    }
  });
});

.alert.green {
 color: green;
}

.alert.red {
 color: red;
}

.fortiny {
  width: 60%;
  height: 40px !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-12 radiobutton">
                    <div class="col-sm-5">
                        <div class="form-group">
                            <div class="radio radio-replace color-green">
                                        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1">
                                        <label><b>A</b></label>
                                    </div>
                            <textarea class="form-control fortiny" name="area2" cols="1" rows="1" style="height: 100px;" ></textarea>
                        </div>
                    </div>
                    <div class="col-sm-5">
                        <div class="form-group">
                            <div class="radio radio-replace color-green">
                                        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                                        <label><b>B</b></label>
                                    </div>
                            <textarea class="form-control fortiny" name="area2" cols="1" rows="1" style="height: 100px;" ></textarea>
                        </div>
                    </div>
                    <div class="col-sm-5">
                        <div class="form-group">
                            <div class="radio radio-replace color-green">
                                        <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3">
                                        <label><b>C</b></label>
                                    </div>
                            <textarea class="form-control fortiny" name="area2" cols="1" rows="1" style="height: 100px;" ></textarea>
                        </div>
                    </div>
                    <div class="col-sm-5">
                        <div class="form-group">
                            <div class="radio radio-replace color-green">
                                        <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3">
                                        <label><b>D</b></label>
                                    </div>
                            <textarea class="form-control fortiny" name="area2" cols="1" rows="1" style="height: 100px;" ></textarea>
                        </div>
                    </div>
                </div>