JSFiddle - React, Tailwind, and code Playground

by besign

HTML

<script src="script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="container" id="questions-all" style="border: solid 1px red; padding:20px">
<form>


    <div class="row">        
    <button type="button" class="btn btn-blue add-row">+</button>
        <div class="new-question-set" style="border: solid 1px green; padding:20px">
          <h3 class="text-center text-primary">Pregunta 
          <input name="question_1" placeholder="Escriba una respuesta" class="form-control" type="text"><button type="button" class="btn btn-danger delete-row">-</button>            
          </h3>              
        
        <div class="col-md-12 new-question" style="border: solid 1px blue">
            <table class="table table-hover" id="worked">
                <thead>
                    <tr>
                        <th>Respuestas
                            <button type="button" class="btn btn-blue add-row">+</button>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <input name="answer_1[]" placeholder="Escriba una respuesta" class="form-control" type="text"><button type="button" class="btn btn-danger delete-row">-</button>
                        </td>
                    </tr>                     
                </tbody>
            </table>
            <button type="send" class="btn btn-sucess send">ENVIAR</button>
        </div>
    </div></div>
    </form>
</div>

JavaScript

var count_question = 1;
     var count_answer 	= 0;   
     
    $('.new-question .add-question').click(function () {
    		count_answer++;
        var template = '<div class="new-question-set"></div>';
        $('#worked tbody').append(template);
    });
    
    
    // Control de respuestas
    $('#worked .add-row').click(function () {
    		count_answer++;
        var template = '<tr><td><input name="answer_'+count_question+'[]" class="form-control" placeholder="Escriba una respuesta" type="text"><button type="button" class="btn btn-danger delete-row">-</button></td></tr>';
        $('#worked tbody').append(template);
    });
 
    $('#worked').on('click', '.delete-row', function () {
        $(this).parent().parent().remove();
        count_answer--;
    });
    
   
   
 $('#questions-all form').on('submit', function(e){
			e.preventDefault;
			var data = $(this).serialize();
			$.ajax({
				type: 'POST',
				url: 'http://',
				data: data,
				beforeSend: function(){
					$('#loading').fadeIn(300).delay(500);
				},
				success: function(r){
					$('#loading').fadeOut(300);
          console.log(r);
          
				}
			});
			return false;
});