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="creditcard">Credit Card</option>
    </select>
  </div>
</div>


<div id="paypal" class="payment-details">
  Connect a PayPal account
  <div class="elementor-field-type-number elementor-field-group elementor-column elementor-field-group-field_10 elementor-col-100 elementor-field-required">
    <label for="form-field-field_10" class="elementor-field-label">Email Address</label><input type="number" name="form_fields[field_10]" id="form-field-field_10" 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_11 elementor-col-100 elementor-field-required">
    <label for="form-field-field_11" class="elementor-field-label">Enter Country</label><input type="number" name="form_fields[field_11]" id="form-field-field_11" class="elementor-field elementor-size-sm  elementor-field-textual" placeholder="Card Number" required="required" aria-required="true"> </div>
</div>

<div id="creditcard" class="payment-details">

  <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"...

CSS

.payment-details {
  display: none;
}

JavaScript

$(function() {
  $('#form-field-field_5').change(function() {
    $('.payment-details').hide();

    if ($(this).val() !== '') {
      $('#' + $(this).val()).show();
    }

  });
});