JSFiddle - React, Tailwind, and code Playground
HTML
<form action="http://www.domain.com/therapists" method="post" accept-charset="utf-8" id="fatform">
<div id="dsearch">
<label for="keywordsearch">Keywords</label>
<input type="text" name="directory_search_string" value="asf" id="keywordsearch">
</div>
<div id="dtts" class="fields">
<label for="fat_tts">Trained to see</label>
<select name="directory_fat_tts" id="fat_tts" class="postform">
<option value="0">All</option>
<option class="level-0" value="21">Adults (1)</option>
<option class="level-0" value="22">Children (2)</option>
</select>
</div>
<div id="dlocation" class="fields">
<label for="fat_location">Location</label>
<select name="directory_fat_location" id="fat_location" class="postform">
<option value="0">All Locations</option>
<option class="level-0" value="17">London (1)</option>
<option class="level-0" value="35">Europe (1)</option>
</select>
</div>
<div id="dlanguage" class="fields">
<label for="fat_location">Languages spoken</label>
<select name="directory_fat_language" id="fat_language" class="postform">
<option value="0">All Languages</option>
<option class="level-0" value="15">English (2)</option>
<option class="level-0" value="36">Serbo-Croat (1)</option>
</select>
</div>
<div id="dspecialism" class="fields">
<label for="fat_specialism">Specialism</label>
<select name="directory_fat_specialism" id="fat_specialism" class="postform">
<option value="0">All Specialisms</option>
<option class="level-0" value="24">Early Years (1)</option>
<option class="level-0" value="28">Schools (1)</option>
<option class="level-0" value="29">Hospital work (1)</option>
<option...
JavaScript
$('#dirreset').click(function() {
$('#fatform option').each(function(index) {
$(this).removeAttr("selected");
});
$('#keywordsearch').val('');
});