JSFiddle - React, Tailwind, and code Playground

by Santosh J

HTML

<div class="container">
    <h1>Add or Remove text boxes with jQuery</h1>
    <div class="row">
        <div class="col-sm-6">
            <div class="my-form">
                <form role="form" method="post" action="">
                    
                         
                    <div class="form-group text-box">
                        <label for="box1">Question <span class="box-number">1</span></label>
                        <input type="text" name="boxes[]" value="" id="box1" />
                        <!--<p class="preview"></p>-->
                        <p class="answer">Answer with <a href="#" class="ansRadio">Radio</a> </p>

                        <a class="add-box" href="#">Add More</a>
                    </div>
                    <br/>
                    <div class="form-group"><input type="submit" value="Submit" /></div>
                </form>
            </div>
        </div>
        <div class="col-sm-6">
             <p class="preview"></p>
        </div>
    </div>
</div>

CSS

.add-box{
    display: none;
}

JavaScript

jQuery(document).ready(function($){
    
    $('#box1').keyup(function () {
         var impt = '<strong>1. </strong>'+ $(this).val();
         $(".preview").html(impt);
    });
    
    
   
    $('.my-form .ansRadio').click(function(){//when radio answer is clicked show the radio answer options
        var n = $('.text-box').length;
        var box_html = $('<div class="radio-box"><label for="box' + n + '">Option <span class="box-number">' + n + '</span></label> <input type="text" name="answer'+n+'[]" value="" id="radio1" /><a href="#" class="remove-option">remove option</a></div>');
        box_html.hide();
        $('.answer').hide();
        $('.my-form div.text-box:last').after(box_html);
        box_html.fadeIn('slow');
         $('#radio1').keyup(function () {
        alert("radio1");
         var impt = '<strong>Please choose</strong>'+ $(this).val();
          appendTo(".preview").append(impt);
         //$(".preview").append(impt);
    });
        return false;
    });
    
    $('.my-form').on('click', '.remove-option', function(){
        $(this).parent().css( 'background-color', '#FF6C6C' );
        $(this).parent().fadeOut("slow", function() {
            $(this).remove();
            $('.box-number').each(function(index){
                $(this).text( index + 1 );
            });
            $('.answer').show();
        });
        return false;
    });
    
});