JSFiddle - React, Tailwind, and code Playground

by largan

HTML

<div class='form'>
   <textarea name="answer[]" id="answer" class="form-control" rows="4" placeholder="Type your answer here"></textarea>
   <div class='actions'>
      <input type="submit" value="Login" disabled="disabled" id="insert"/>
   </div>
   <hr>
   <button class="btn btn-info add_field_button">Add Another textarea</button>
   <div class="input_fields_wrap form-group">
   </div>
</div>

JavaScript

$(document).ready(function () {
	var max_fields = 10; //maximum input boxes allowed
	var wrapper = $(".input_fields_wrap"); //Fields wrapper
	var add_button = $(".add_field_button"); //Add button ID

	var x = 1; //initlal text box count
	$(add_button).click(function (e) { //on add input button click

		e.preventDefault();

		if (x < max_fields) { //max input box allowed
			x++; //text box increment

			$(wrapper).append('<textarea name="answer[]" id="answer" class="form-control" rows="4" placeholder="Type your answer here"></textarea><button type="button" class="btn btn-danger remove_field">Delete</button></div>');


		}
	});

	$(wrapper).on("click", ".remove_field", function (e) { //user click on remove text
		e.preventDefault();
		$(this).parent('div').remove();
		x--;
	})
});
$(document).ready(function () {
	$(document).on('input click keyup keypress blur keyup', 'textarea', function () {

		var empty = false;
		$('textarea').each(function () {
			if ($(this).val().length == 0) {
				empty = true;
			}
		});

		if (empty) {
			$('.actions input').attr('disabled', 'disabled');
		} else {
			$('.actions input').attr('disabled', false);
		}
	});
});