JSFiddle - React, Tailwind, and code Playground

by Suhaib Janjua

HTML

<div class="elementor-field-type-select elementor-field-group elementor-column elementor-field-group-field_5 elementor-col-100 elementor-field-required">
  <label for="form-field-field_5" class="elementor-field-label">Payment Method</label>
  <div class="elementor-field elementor-select-wrapper ">
    <select name="form_fields[field_5]" id="form-field-field_5" class="elementor-field-textual elementor-size-sm" required="required" aria-required="true">
      <option value=""></option>
      <option value="Paypal">Paypal</option>
      <option value="Credit Card">Credit Card</option>
    </select>
  </div>
</div>

<div class="elementor-field-type-number elementor-field-group elementor-column elementor-field-group-field_6 elementor-col-100 elementor-field-required">
  <label for="form-field-field_6" class="elementor-field-label">Card Number</label><input type="number" name="form_fields[field_6]" id="form-field-field_6" class="elementor-field elementor-size-sm  elementor-field-textual" placeholder="Card Number" required="required" aria-required="true"> </div>

<div class="elementor-field-type-number elementor-field-group elementor-column elementor-field-group-field_7 elementor-col-100 elementor-field-required">
  <label for="form-field-field_7" class="elementor-field-label">CVV Code</label><input type="number" name="form_fields[field_7]" id="form-field-field_7" class="elementor-field elementor-size-sm  elementor-field-textual" placeholder="CVV Code" required="required" aria-required="true"> </div>

<div class="elementor-field-type-date elementor-field-group elementor-column elementor-field-group-field_8 elementor-col-100 elementor-field-required">
  <label for="form-field-field_8" class="elementor-field-label">Expiry Date</label><input type="text" name="form_fields[field_8]" id="form-field-field_8" class="elementor-field elementor-size-sm elementor-field-textual elementor-date-field flatpickr-input" required="required" aria-required="true"> </div>

<div...

JavaScript

$(document).ready(function() {
  $('#form-field-field_5').change(function() {


    if ($('#form-field-field_5 option:selected').val().toString() === "Credit Card") {
      $('.elementor-field-group-field_6, .elementor-field-group-field_7, .elementor-field-group-field_8, .elementor-field-group-field_9').show();
    } else {
      $('.elementor-field-group-field_6, .elementor-field-group-field_7, .elementor-field-group-field_8, .elementor-field-group-field_9').hide();
    }
  });
});