JSFiddle - React, Tailwind, and code Playground

by adrianlynch

HTML

<form id="test">
<input type="text" id="newID"/>

<div class="checkboxlist">
<p class="label">Select</p>
<p class="list" id="further-information">
<span class="checkboxitem">
<input type="checkbox" data-validate-group="further-information" id="further-information-1" name="further-information-1" value="Information Evening" aria-invalid="false">
<label for="further-information-1">Information Evening</label>
</span>
<span class="other">
<input type="text" id="further-information-1-other" name="further-information-1-other" class="text hide" data-toggle="further-information-1-t" aria-invalid="false">
</span>
<span class="checkboxitem">
<input type="checkbox" data-validate-group="further-information" id="further-information-2" name="further-information-2" value="2 day training Tuesday and Wednesday" aria-invalid="false">
<label for="further-information-2">2 day training Tuesday and Wednesday</label>
</span>
<span class="other">
<input type="text" id="further-information-2-other" name="further-information-2-other" class="text hide" data-toggle="further-information-2-t" aria-invalid="false">
</span>
<span class="checkboxitem">
<input type="checkbox" data-validate-group="further-information" id="further-information-3" name="further-information-3" value="1 day advanced training Monday" aria-invalid="false">
<label for="further-information-3">1 day advanced training Monday</label>
</span>
<span class="other">
<input type="text" id="further-information-3-other" name="further-information-3-other" class="text hide" data-toggle="further-information-3-t" aria-invalid="false">
</span>
<span class="checkboxitem">
<input type="checkbox" data-validate-group="further-information" id="further-information-4" name="further-information-4" value="text:other" data-trigger="further-information-4-t" class="user-error" aria-invalid="true">
<label for="further-information-4">Other...</label>
</span>
<span class="other">
<input type="text" id="further-information-4-other"...

CSS

.none {
    border: 1px solid red;
}

JavaScript

jQuery(document).ready(function($) {

    $("#newID").keyup(function() {
		var input = $(this),
		text = input.val().toLowerCase().replace(/[\s]/g, "-").replace(/&/g, "and").replace(/[^a-z0-9-_]/g, "").replace(/[-]{2,}/g, "-");
		input.val(text);
	});


	/* !Toggles */
	var previoustrigger;
	$('select').focus(function () {
		// Store the current value on focus, before it changes
		previoustrigger = $(this).find(':selected').attr('data-trigger');
	}).on('change', function () {
		var form = $(this).closest('form').attr('id');
		var trigger = $(this).find(":selected").attr('data-trigger');
		if (previoustrigger && previoustrigger != trigger) {
			//if we had a previous data-trigger then hide and reset those items
			formToggles('hide', previoustrigger, form);
		}
		if (trigger) {
			//show triggered element
			formToggles('show', trigger, form);
		}
		//lets update the previous trigger in case a second choice is made.
		previoustrigger = $(this).find(':selected').attr('data-trigger');
	});
	
	$(':checkbox').click(function () {
		var form = $(this).closest('form').attr('id');
		var trigger = $(this).attr('data-trigger');
        
		if ($(this).is(':checked') && trigger) {
			formToggles('show', trigger, form);
		} else if (trigger) {
			formToggles('hide', trigger, form);
		}
	});
	
	function formToggles(state, trigger, form)
	{
		if (state == 'hide') {
			$('#' + form).find('[data-toggle="' + trigger + '"]').addClass('none').val('').removeAttr('checked').removeAttr('selected');
		}
		if (state == 'show') {
			$('#' + form).find('[data-toggle="' + trigger + '"]').removeClass('none');
        }
	}
});