JSFiddle - React, Tailwind, and code Playground

HTML

<form id="cityfibre_form"  action="cityfibre_data.html" method="get" onsubmit="return validate(this);" target="_blank" >   <!--onsubmit="mySubmit()"       onreset="myReset()"-->
                            <div id="Page1">    <!--SURVEY FORM PAGE 1                 action="cityfibre_data.html"   onsubmit="return validate(this);-->
                                <h2 class="property">Property information</h2>
                                <fieldset>
                                    <figure class="property_information">
                                        <figure class="fig">
                                            <label>
                                                <div class="order">A</div>
                                                <p>Proposed Cable Route<span class="asterisk">&#42;</span></p>
                                            </label>
                                            <br>
                                            <select name="proposed_cable_route" id="cf_proposed_cable_route" required>
                                                <option value="" disabled selected>-Select your answer-</option>
                                                <option value="External">External</option>
                                                <option value="Internal">Internal</option>
                                                <option value="Combination">PIA</option>
                                            </select>
                                        </figure>
                                                            <script>
                                                                    $('#cf_proposed_cable_route').change(function() {
                                                                        var text = $(this).val();
                                                                        console.log(text);
                                                                       ...