JSFiddle - React, Tailwind, and code Playground

by John St Leger

HTML

<div class="question 0">
			<h2>Question 0</h2>
			<a class="answer" data-filter="A" >A</a>
			<a class="answer" data-filter="B" >B</a>
			<a class="answer" data-filter="C" >C</a>
			<a class="answer" data-filter="D" >D</a>
		</div>

		

		<div class="question 1">
			<h2>Question 1</h2>
			<a class="answer" data-filter="A" >A</a>
			<a class="answer" data-filter="B" >B</a>
			<a class="answer" data-filter="C" >C</a>
			<a class="answer" data-filter="D" >D</a>
		</div>

		<div class="question 2">
			<h2>Question 2</h2>
			<a class="answer" data-filter="A" >A</a>
			<a class="answer" data-filter="B" >B</a>
			<a class="answer" data-filter="C" >C</a>
			<a class="answer" data-filter="D" >D</a>
		</div>

		<div class="question 3">
			<h2>Question 3</h2>
			<a class="answer" data-filter="A" >A</a>
			<a class="answer" data-filter="B" >B</a>
			<a class="answer" data-filter="C" >C</a>
			<a class="answer" data-filter="D" >D</a>
		</div>

		<div class="question 4">
			<h2>Question 4</h2>
			<a class="answer" data-filter="A" >A</a>
			<a class="answer" data-filter="B" >B</a>
			<a class="answer" data-filter="C" >C</a>
			<a class="answer" data-filter="D" >D</a>
		</div>

JavaScript

$(document).ready(function() {

				var current_question = 0;

				var answers = {"A":0,"B":0,"C":0,"D":0};

				var change_question = function(number){
					$(".question").hide();
					$(".question."+number).fadeIn(500);
				};


				//hide questions on load
				change_question(current_question);


				$(".question a.answer").click(function(){

					if(current_question<4){

						var abcd = $(this).attr("data-filter");
						var answer_select = "answers."+abcd;
                        
                        
                        console.log("Why can't I use this "+ answer_select +" "+" To select my answers object");

						// why does this not wok
						answer_select=60;	

						current_question++;
						change_question(current_question);

					}else{

						console.log(answers);

					};
				});
			});