JSFiddle - React, Tailwind, and code Playground

by Jihwan Kim

HTML

<div class="q2">
  <label for="q2">What type of symptoms that your child has?</label>
  <div class="q2-answer" id="q2">
    <div class="product-multiple">
      <img alt="doctor select" src="http://i.istockimg.com/file_thumbview_approve/45921804/5/stock-photo-45921804-lake-view.jpg" name="gassy">
      <div>Gassy</div>
    </div>
    <div class="product-multiple">
      <img alt="doctor select" src="http://i.istockimg.com/file_thumbview_approve/45921804/5/stock-photo-45921804-lake-view.jpg" name="fussy">
      <div>Fussy</div>
    </div>
    <div class="product-multiple">
      <img alt="doctor select" src="http://i.istockimg.com/file_thumbview_approve/45921804/5/stock-photo-45921804-lake-view.jpg" name="diahrea">
      <div>Diahrea</div>
    </div>
    <div class="product-multiple">
      <img alt="doctor select" src="http://i.istockimg.com/file_thumbview_approve/45921804/5/stock-photo-45921804-lake-view.jpg" name="spitup">
      <div>Spit Up</div>
    </div>
    <div class="product-multiple">
      <img alt="doctor select" src="http://i.istockimg.com/file_thumbview_approve/45921804/5/stock-photo-45921804-lake-view.jpg" name="constipation">
      <div>Constipation</div>
    </div>
  </div>
  <div class="q2-get-answer">
    Q3 click me
  </div>
</div>


<br/>
<br/>
<br/>
<br/>
<br/>
<div>
  Images From iStock For Testing Purpose only : http://i.istockimg.com/
</div>

CSS

.product-multiple {
  float: left;
  margin: 10px;
}

.product-multiple img {
  width: 200px;
  height: 150px;
}

.product-multiple img:hover {
  cursor: pointer;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
  cursor: pointer;
}

.digestive-tool {
  padding: 10px;
  margin: 10px;
  border: 1px solid #ccc;
}

.digestive-tool .q1-answer li,
.digestive-tool .q2-answer li,
.digestive-tool .q3-answer li,
.digestive-tool .q4-answer li,
.digestive-tool .q5-answer li,
.digestive-tool .q6-answer li {
  list-style-type: none;
  display: inline-block;
}

.digestive-tool .q1-get-answer,
.digestive-tool .q2-get-answer,
.digestive-tool .q3-get-answer,
.digestive-tool .q4-get-answer,
.digestive-tool .q5-get-answer,
.digestive-tool .q6-get-answer {
  border: 1px solid #f00;
  padding: 10px;
  display: inline-block;
  cursor: pointer;
}

.digestive-tool .product,
.digestive-tool .product-multiple {
  display: inline-block;
}

.digestive-tool .product img,
.digestive-tool .product-multiple img {
  width: 150px;
  height: 180px;
  cursor: pointer;
}

.selectTag {
  border: 2px solid #00257a;
}

.q2-get-answer {
  margin-top: 20px;
  clear: left;
  border: 1px solid #900;
  background: #f00;
  cursor: pointer;
  width: 200px;
  padding: 20px;
  color: #fff;
}

JavaScript

var selected = [];

$('.q2 .product-multiple').on('click', function(e) {
  if ($(this).hasClass('selectTag')) {
    $(this).removeClass('selectTag');
    var name = $(this).find('img').attr('name');

    // remove the name from selected
    for (var i = 0; i < selected.length; i++) {
      if (name === selected[i]) {
        selected.splice(i, 1);
      }
    }

    console.log("Should be Removed here.. ", name);
    console.log("Passing Value in Array - ", selected.join(', '))
  } else {
    $(this).addClass('selectTag');

    var name = $(this).find('img').attr('name');
    selected.push(name);
    console.log("Passing Value in Array - ", selected.join(', '))
  }
});

$('.q2-get-answer').on('click', function() {
  alert(selected.join(', '));
  console.log(selected.join(', '));
});