JSFiddle - React, Tailwind, and code Playground

by princeofabyss

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<div id="wpforms-1345-field_6-container" class="wpforms-field wpforms-field-radio row-selection" data-field-id="6">
  <label class="wpforms-field-label" for="wpforms-1345-field_6">What is your age?
    <span class="wpforms-required-label">*</span>
  </label>
  <ul id="wpforms-1345-field_6" class="wpforms-field-required">
    <li class="choice-1 depth-1">
      <input type="radio" id="wpforms-1345-field_6_1" name="wpforms[fields][6]" value="0-15" required="">
      <label class="wpforms-field-label-inline" for="wpforms-1345-field_6_1">0-15</label>
    </li>
    <li class="choice-2 depth-1">
      <input type="radio" id="wpforms-1345-field_6_2" name="wpforms[fields][6]" value="16-25" required="">
      <label class="wpforms-field-label-inline" for="wpforms-1345-field_6_2">16-25</label>
    </li>
    <li class="choice-3 depth-1">
      <input type="radio" id="wpforms-1345-field_6_3" name="wpforms[fields][6]" value="26-35" required="">
      <label class="wpforms-field-label-inline" for="wpforms-1345-field_6_3">26-35</label>
    </li>
    <li class="choice-5 depth-1">
      <input type="radio" id="wpforms-1345-field_6_5" name="wpforms[fields][6]" value="36-45" required="">
      <label class="wpforms-field-label-inline" for="wpforms-1345-field_6_5">36-45</label>
    </li>
    <li class="choice-4 depth-1">
      <input type="radio" id="wpforms-1345-field_6_4" name="wpforms[fields][6]" value="46-100" required="">
      <label class="wpforms-field-label-inline" for="wpforms-1345-field_6_4">≥46</label>
    </li>
  </ul>
</div>
<div id="wpforms-1345-field_9-container" class="wpforms-field wpforms-field-checkbox row-selection" data-field-id="9">
  <label class="wpforms-field-label" for="wpforms-1345-field_9">What are your objectives?
    <span class="wpforms-required-label">*</span>
  </label>
  <ul id="wpforms-1345-field_9" class="wpforms-field-required">
    <li class="choice-1...

CSS

.wpforms-field {
  background-color: #d0d;
  padding: 10px;
  margin-bottom: 10px;
}

ul li {
  background-color: #eee !important;
  border-radius: 4px;
  padding: 10px !important;
  list-style: none !important;
  margin-bottom: 5px !important;
  user-select: none;
  cursor: pointer;
}

ul li.wpforms-selected {
  background-color: #888 !important;
}

ul li label {
  cursor: pointer;
}

JavaScript

jQuery(function($) {
  let t = 0;

  $('.row-selection li').on('click', function(event) {
    console.log("fired " + ++t + " times")
    $(this).children('input')[0].click();
  });

  $('.row-selection li input').on('click', function(event) {
    event.stopPropagation();
  });

  // CODE BELOW THIS COMMENT ISN'T EDITABLE, IT'S AN EXTERNAL SCRIPT
  $(document).on('change', '.wpforms-field-checkbox input, .wpforms-field-radio input, .wpforms-field-payment-multiple input, .wpforms-field-payment-checkbox input, .wpforms-field-gdpr-checkbox input', function(event) {
    var $this = $(this);
    var $field = $this.closest('.wpforms-field');

    switch ($this.attr('type')) {
      case 'radio':
        $this.closest('ul').find('li').removeClass('wpforms-selected').find('input[type=radio]').removeProp('checked');
        $this.prop('checked', true).closest('li').addClass('wpforms-selected');
        break;
      case 'checkbox':
        if ($this.is(':checked')) {
          $this.closest('li').addClass('wpforms-selected');
          $this.prop('checked', true);
        } else {
          $this.closest('li').removeClass('wpforms-selected');
          $this.prop('checked', false);
        }
        break;
    }
  });
});