JSFiddle - React, Tailwind, and code Playground

by barrycorrigan

HTML

<div class="row  questionWrap">
    <div class="col-msm-12  col-tsm-6">
        <div class="question">
            <label class="questionTitle">Is your pet male or female?</label>
        </div>
    </div>

    <div class="col-msm-12 col-tsm-6">
        <ul class="radioGroup  inputGroup__inline">
                <li class="radioOption">
                    <input class="petgenderradio" data-val="true" data-val-required="Please select your pet's gender" id="Enquiry_Pets_0__Gender100" name="Enquiry.Pets[0].Gender" type="radio" value="100">
                    <label for="Enquiry_Pets_0__Gender100">Male</label>
                </li>
                <li class="radioOption">
                    <input class="petgenderradio" id="Enquiry_Pets_0__Gender101" name="Enquiry.Pets[0].Gender" type="radio" value="101">
                    <label for="Enquiry_Pets_0__Gender101">Female</label>
                </li>
        </ul>
    </div>
</div>


<div class="row questionWrap warrantyQ">
  <div class="col-msm-12  col-tsm-6">
    <div class="question">
      <label class="questionTitle">Has your pet been neutered / spayed?</label>
    </div>
  </div>
</div>

JavaScript

var male = {val: '100', question:'/([neutered)+/g'};
var female = {val: '101', question:'Has your pet been spayed?'};
var text = $('.warrantyQ .questionTitle').text();

$(document).on('change', '.petgenderradio', function () {
  if ($(this).val() == male.val) {
    $('.warrantyQ .questionTitle').text(text.replace(male.question, 'doll'));
  }
  else if ($(this).val() == female.val) {
    $('.warrantyQ .questionTitle').text(female.question);
  }
});