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 getQ1Answer, getQ2Answer, getQ3Answer, getQ4Answer, getQ5Answer, getQ6Answer, sliderValue, selectMonth, q1answer, getTags;
		var getTagsName = "";
    
    questionCount = 0;
		$('.q2 .product-multiple').on('click',function(e){
			if($(this).hasClass('selectTag')){
				questionCount--;
				$(this).removeClass('selectTag');
			
				removeItem = "Removing Clicked element Name -  " + $(this).find('img').attr('name')
				alert(removeItem);
				//alert(getTagsNameArray);
				
				
				
				
				//alert(removeItem)
				//var index = getTagsNameArray.indexOf(removeItem);
				
				//if (index > -1) {
					//getTagsNameArray.splice(index, 1);
				//}
				//getTagsNameArray.remove($('removeItem'));
				//getTagsNameArray.splice( $.inArray(removeItem) );
        console.log("Should be Removed here.. " +" "+ getTagsNameArray)

				
			} 
			else {
				questionCount++;
				$(this).addClass('selectTag');
				getTagsNameArray = new Array();
				getTagsName = getTagsName + "," + $(this).find('img').attr('name');
				getTagsNameArray.push(getTagsName)
        console.log("Passing Value in Array - " +" "+ getTagsNameArray)
				
			}
			//getTags = new Array();
			
			
			
			//getTagsName = $(this).find(' img').attr('name');
			//$(this).parent().each(function() {
			//	getTags.push($(this).find('.selectTag img').attr('name'));
			//})
			
			
			//console.log(getTagsNameArray)
		});
		
		$('.q2-get-answer').on('click', function(){
//			alert(getTagsName);
			//console.log(getTagsName);
			getTagsName = getTagsName +" / "+ $('.q2-answer').find('.product-multiple.selectTag img').attr('name');
			
			alert(getTagsName)
			console.log(getTagsName);
			
			
			//getTagsNameArray.push(getTagsName)
			
			
			//alert(getQ1Answer);
//if( q1answer === null  || q1answer === undefined ) {
//	alert('please select value');
//}
//else {
//	// show next
//}
		})