JSFiddle - React, Tailwind, and code Playground
by sbhomra
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<ul>
<li>
<label for="salutation">Title</label>
<select id="salutation" name="salutation" data-object="contact" data-value="Mr" data-required="true">
<option value="">Please select a value</option>
</select>
</li>
<li><label for="last-name">Surname</label> <input type="text" id="last-name" name="lastname" data-object="contact" value="Bhomra" data-required="true"></li>
<li><label for="first-name">Forename(s)</label> <input type="text" id="first-name" name="firstname" data-object="contact" value="Surinder" data-required="true"></li>
<li><label for="first-name">Previous name</label> <input type="text" id="previous-name" name="previous_name" data-object="contact" value="Sur"></li>
<li><label for="first-name">Email address</label> <input type="text" id="email" name="email" data-object="contact" value="[email protected]" data-required="true"></li>
<li><label for="first-name">Date of birth</label> <input type="date" id="date-of-birth" name="date_of_birth" placeholder="dd-mm-yyyy" min="1950-01-01" data-object="deal" value="
2022--"></li>
<li>
<label for="country-of-birth">Country of Birth</label>
<select id="country-of-birth" name="country_of_birth" data-object="deal" data-value="" data-required="true">
<option value="">[Select]</option>
</select>
</li>
<li>
<label for="uk-resident">Are you a UK resident?</label>
<select id="uk-resident" data-object="contact" name="are_you_a_uk_resident_" data-value="" data-required="true">
<option value="">[Select]</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</li>
<li>
<label for="country-of-residence">If no, country of permanent residence</label>
<select id="country-of-residence" name="country_of_residence_"...
JavaScript
console.log($("div:not(.is-hidden)").find("[data-required]"))