JSFiddle - React, Tailwind, and code Playground

by fmdx

HTML

<div>
    <input id="needb1-3customcheck" type="checkbox" class="schedb1checkboxes[]" data-select="#needb1-3custom">Need Custom?
</div>
<div id="needb1-3custom" style="display:none; padding-left:40px;">
            <div id="customb1_3" style="padding-left:40px;">
            <textarea id="needb1_3_1" placeholder="Six Foot Utility..." name="needb1_3[]" required></textarea>
    	    </div><!-- Ending Custom Div -->
    <div style="padding-left:40px;"><a id="add_b1_3" href="#"><span>Add Exception</span></a>
    </div>
</div>

JavaScript

var b1_3customcounter = 1;
$(function () {
    $('a#add_b1_3').click(function () {
        b1_3customcounter += 1;
        $('#customb1_3').append(
			'<div><textarea id="need_b1_3_' + b1_3customcounter + '" placeholder="Six Foot Utility..." name="needb1_3[]' + '" required></textarea><a class="remove" href="#">Remove</a></div>');					 			 
			event.preventDefault();
    });
});

$(document).on('click', '.remove', function(){
    var $this = $(this);
    $(this).closest('div').remove();
	event.preventDefault();
});

//Beginning Needed b1-3 Custom JQuery
	  $('#needb1-3customcheck').click(function(){
		var collapse_content_selector = $(this).attr('data-select');					

		$(collapse_content_selector).toggle(function(){
		  if($(this).css('display')=='none'){
                        //Do this while the section is hidden
			$('#needb1_3_1').prop('required', false);
	}else{
			//Do this while the section is visible
			$('#needb1_3_1').prop('required', true);
		  }
		});
	  });
//Ending Needed b1-3 Custom JQuery