JSFiddle - React, Tailwind, and code Playground

by CR47

HTML

<div class="personalized-questions-wrapper" style="overflow: hidden; display: block;">
            <div class="question-card-wrapper">
    <div id="Consumer-Interest" class="question-card">
      <div class="pe-question-wrapper">
        <span class="pe-question">Tell us what you're interested in to better personalize your experience </span>
      </div>
      <form class="pe-form">
        <div class="pe-answers-wrapper answer-type-checkbox">
                              <div class="pe-answer-wrapper">
              <div class="pe-answer pe-answer_0 pe-answer-checkbox">
                <input class="pe-checkbox" id="pe-kidsBaby-0" type="checkbox" name="Consumer-Interest" value="kidsBaby">
                <label class="pe-label" for="pe-kidsBaby-0">Kids &amp; Baby </label><br>
              </div>
            </div>
                      <div class="pe-answer-wrapper">
              <div class="pe-answer pe-answer_1 pe-answer-checkbox">
                <input class="pe-checkbox" id="pe-beautySkinLotionsHair-1" type="checkbox" name="Consumer-Interest" value="beautySkinLotionsHair">
                <label class="pe-label" for="pe-beautySkinLotionsHair-1">Beauty, Skin, Lotions &amp; Hair</label><br>
              </div>
            </div>
                      <div class="pe-answer-wrapper">
              <div class="pe-answer pe-answer_2 pe-answer-checkbox">
                <input class="pe-checkbox" id="pe-firstAidCutsEczema-2" type="checkbox" name="Consumer-Interest" value="firstAidCutsEczema">
                <label class="pe-label" for="pe-firstAidCutsEczema-2">First Aid, Cuts &amp; Eczema </label><br>
              </div>
            </div>
                      <div class="pe-answer-wrapper">
              <div class="pe-answer pe-answer_3 pe-answer-checkbox">
                <input class="pe-checkbox" id="pe-oralCareHealthyMouths-3" type="checkbox" name="Consumer-Interest" value="oralCareHealthyMouths">
                <label class="pe-label"...

CSS

@font-face{font-family:'icomoon';src:url(data:application/vnd.ms-fontobject;base64,HBIAAHgRAAABAAIAAAAAAAAAAAAAAAAAAAABAJABAAAAAExQAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAMLfvkQAAAAAAAAAAAAAAAAAAAAAAAA4AaQBjAG8AbQBvAG8AbgAAAA4AUgBlAGcAdQBsAGEAcgAAABYAVgBlAHIAcwBpAG8AbgAgADEALgAwAAAADgBpAGMAbwBtAG8AbwBuAAAAAAAAAQAAAAsAgAADADBPUy8yDpIDQAAAALwAAABgY21hcBpVzG0AAAEcAAAATGdhc3AAAAAQAAABaAAAAAhnbHlmsf1yVQAAAXAAAA2MaGVhZAGA7XgAAA78AAAANmhoZWEHwgPcAAAPNAAAACRobXR4UEoGFwAAD1gAAABsbG9jYSqALfwAAA/EAAAAOG1heHAAIABsAAAP/AAAACBuYW1lRBi01gAAEBwAAAE5cG9zdAADAAAAABFYAAAAIAADBAABkAAFAAACmQLMAAAAjwKZAswAAAHrADMBCQAAAAAAAAAAAAAAAAAAAAEQAAAAAAAAAAAAAAAAAAAAAEAAAOYWA8D/wP/AA8AAQAAAAAEAAAAAAAAAAAAAACAAAAAAAAIAAAADAAAAFAADAAEAAAAUAAQAOAAAAAoACAACAAIAAQAg5hb//f//AAAAAAAg5gD//f//AAH/4xoEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAACAAAAAAQAA6EABQAOAAAJAjUJAQcRIREhESERAQQA/gD+AAIAAgCA/wD/AP8AAYABcgGN/nOiAY3+c5T+gAEA/wABgAEgAAAEAAAAAAQAA4AAAwAgACUAOgAAASEVIQUhIg4CFREUHgI7AREhETMyPgI3AzYuAiMBIQMhAwEOAyMiLgI3Jj4CMzIeAhcBAAIA/gACwPyADRgRCgoRGA3AAgDADRcSCQEBAQsQGQz+//6BAQGBAQEPAQYNEAsJEgsIAQEICxIJCxANBgEDgIBAChEYDf7ADRcSCv8AAQAKERgMAUEMGBEK/YABQP7AAiAKEQwHBwwRCgoRDAcHDBEKAAAAAAIAbABHA4kDYQAmADsAACUnPgM1NC4CIyIOAhUUHgIzMj4CNxceATI2PwE+AS4BJwE0PgIzMh4CFRQOAiMiLgI1A4LBCxEMBjVadkJBdFYxNFp2QhYqKCYSwgcSExIHMAcFAgoH/UsiPFAtLlM/JSI8UC0tUz8mtcESJyorF0F3WTUyVXRBQnZaNQYLEArCCAcHCDAHEBAQBwFwLVA7IyY/Uy0uUDsjJj9TLgACADMApAPNAvYAHwBTAAATHgMXHgMzMj4CNz4DNz4CJiMhIgYeARcFDgMHDgMjIi4CJy4DJyYiDgEVHAMxFB4CMyEyPgI1MDwCNTQuASIHUgl3iXIFBAsMDQYGDQwLBAVyiXcJChAFCxH8nhELBRAKA2cLeYt1BwYMCwsGBgsLDAYHdYt5CwcJAwEKDxIIAzQIEg8KAQMJBwK+BUBJPgIDBAIBAQIEAwM9SUAFBRMSDg4SEwVmBj9JPQQDBAIBAQIEAwQ9ST8GBAUHAwR2i3MIEQ8JCQ8RCHOLdgMEBwUEAAEBAAAAAwADmgAYAAABIyIOAh0BMxUjESMRIzUzNTQ+AjsBFQMAkgcNCge3t6ydnR84TC6SAvkIDhMMaZf+PAHEl1gwVD4loQAAAAACAQAAMwMAA2YAFAApAAABIg4CFRQeAjEwPgI1NC4CIxEiLgI1ND4CMzIeAhUUDgIjAgA1XUYoUGBQUGBQKEZdNR0yJhUVJjIdHTImFRUmMh0DZihFXjVbx6Zra6bHWzVeRSj+cxYlMxwdMiYWFi...

JavaScript

$(".pe-answer-submit").click(function(e) {
  e.preventDefault();
  if ($(this).parent().parent().find('div.answer-type-checkbox').hasClass('answer-type-checkbox')) {
    if ($(this).parent().parent().children().find('input:checkbox:checked').length > 0) {           
      $(this).parents('.question-card-wrapper').hide('fast');
      var checked_vals = [];
      $(this).parent().parent().children().find('input:checked').each(function() {
          alert($(this).parent().parent().children().find('input:checked').val());
      });
      var answer_val = $(this).parent().parent().children().find('input:checkbox:checked').val();
      current_num++;
    } else {
      alert("Please select an option.");
    }
  }
}); // End question card submit button click function