JSFiddle - React, Tailwind, and code Playground
by ian_smithz
HTML
<link rel="stylesheet" href="https://vuxdev2025.ondc.screwfix.local:8080/assets/css/sfx.min.css">
<div class="fm-item bl-country">
<div class="country-change-step1">
<span class="h3"><span class="country-name">United Kingdom</span> -</span> <a href="">Change country</a>
</div>
<div class="country-change-step2">
<label class="label" for="country">Country <span class="req">*</span></label>
<div class="select-country-flag flag-">
<i></i>
</div>
<select id="country" name="country" class="fm-select fm-input" autocomplete="off" required="" data-err-msg="Please choose your country">
<option value="">Please choose your country</option>
<option value="GB">United Kingdom</option>
<option value="AT">Austria</option>
<option value="BE">Belgium</option>
<option value="BG">Bulgaria</option>
<option value="HR">Croatia</option>
<option value="CY">Cyprus</option>
<option value="CZ">Czech Republic</option>
<option value="DK">Denmark</option>
<option value="EE">Estonia</option>
<option value="FI">Finland</option>
<option value="FR">France</option>
<option value="DE">Germany</option>
<option value="GR">Greece</option>
<option value="HU">Hungary</option>
<option value="IE">Ireland</option>
<option value="IT">Italy</option>
<option value="LV">Latvia</option>
<option value="LT">Lithuania</option>
<option value="LU">Luxembourg</option>
<option value="MT">Malta</option>
<option value="NL">Netherlands</option>
<option value="PL">Poland</option>
<option value="PT">Portugal</option>
<option value="RO">Romania</option>
<option value="SK">Slovakia</option>
<option value="SI">Slovenia</option>
<option value="ES">Spain</option>
<option value="SE">Sweden</option>
</select> <p class="fm-text">Please note, you will be required to add a valid UK address...
JavaScript
$(".country-change-step1>a").on("click", function(b) {
b.preventDefault();
$(".country-change-step1").hide();
$(".country-change-step2").show();
$(this).prop("required", true)
})