JSFiddle - React, Tailwind, and code Playground

by dezignas

HTML

<form class="Chronoform hasValidation" enctype="multipart/form-data" method="post" id="chronoform_membership_registration_form" name="membership_registration_form" action="http://vividnight.com/moonlight/en/membership-registration.html?chronoform=membership_registration_form&amp;event=submit">
  <div style="" id="id1_container_div" class="ccms_form_element cfdiv_header">
    <h2 class="itemtitle"> Membership Registration Form </h2>
    <div class="clear"></div>
  </div>
  <div style="" id="id2_container_div" class="ccms_form_element cfdiv_header">
    <p>The following membership details are required for identifying observation reports and for sending monthly moon sighting alert messages. The details will be kept strictly confidential on our secure server and may not be forwarded to any third parties. The red exclamation mark (<span class="red">!</span>) shows conditional input, which may not be required for any non-Muslim members. </p>
    <p></p>
    <div class="clear"></div>
  </div>
  <fieldset id="cf_container_55" class="cf_container ccms_form_element ">
    <legend>Personal Information</legend>
    <div style="" id="muslim_container_div" class="ccms_form_element cfdiv_radio">
      <label for="muslim">Are you a Muslim?:</label>
      <input type="hidden" alt="ghost" value="" name="muslim">
      <div style="float:left; clear:none;">
        <input type="radio" class="validate['required'] radio" value="Yes" title="" id="muslim_0" name="muslim">
        <label for="muslim_0">Yes</label>
        <input type="radio" class="validate['required'] radio" value="No" title="" id="muslim_1" name="muslim">
        <label for="muslim_1">No</label>
        <span class="asterix"> * </span></div>
      <div class="tooltipimg" rel="Please specify are you a Muslim" title=""><a href="#">?</a></div>
      <div class="clear"></div>
      <div id="error-message-muslim"></div>
    </div>
    <div style="" id="title1_container_div" class="ccms_form_element cfdiv_select">
     ...

JavaScript

function showhidecontainer (checkbox,container) {

$(function(){
          var validateclass = "validate['required']";      
            if (checkbox.val() == "Yes") {
            container.show();
             $("input[type=text]").addClass(validateclass);   
            } else {
             container.hide();
             $("input[type=text]").removeClass(validateclass);
            }                                                            

        checkbox.change(function(){                   
            if ($(this).val() == "Yes") {
            container.show();
             $("input[type=text]").addClass(validateclass);

            } else {
             container.hide();
            $("input[type=text]").removeClass(validateclass);
            }                                                            
       });
});
    
   }; 





var checkboxer1 = $("input[id*=muslim_]");
var container1 = $("#cf_container_47");

showhidecontainer (checkboxer1,container1);