Get Specific Div Content Based On Id

Question

I am trying to get specific div content based on id. As an example, I've the following contents one by one in the front-end using div:

Question 1

User clicks next, then the second question within the div and so on will come up. When there will be no questions left and user clicks next again, it'll show the question numbers as follows: Say for three questions at the end, a similar list will appear in the front-end

Question 1 Question 2 Question 3 

When user will click in any of the question, it should take the user to that specific question. Notice that, this isn't an anchor and it has to be done using the div section. Here's a fiddle that I was trying to work with - JS Fiddle

In the code, I've a div area that remains hidden initially, specifically the question numbers that'll appear at the end. So it reaches the last question, it enables that div area and shows the question number. Here is the code snippet:

$(".getVal").click(function () {
    var $container = $('.divs').children().eq();

    var id = $(".h2Val").text().trim();
    var id2 = $(this).attr("data-id"); //Assigned data-id to match the question id
    
    if (id.match(id2)) { //When match found, trying to enable the div with question
         $(".hideSection1").show();
         $(".hideSection2").hide();
    }
});

Now the problem I face, is it actually possible to get that specific div with question as this isn't an anchor or href or any better way to overcome this issue? In my case, it shows the question but the last one but required to obtain corresponding questions clicking on question numerbers.

Code Snippet :

 $(document).ready(function() { $(".hideSection2").hide(); divs = $(".divs").children(); divs.each(function(e) { if (e.= 0) $(this);hide(); }), var index = 0. divs = $(".divs");children(); //declare var indexes = 0. $(".button").click(function() { //get div length var lengths = divs;length. //checking if btn clicked is next if ($(this).is('#next')) { //checking if value if less then length if ((indexes < (lengths - 1))) { //increment //remove $(this),prop('disabled'; false). $(this),css("background-color"; "blue"). console.log("in - " + indexes) //show div index = (index + 1) % divs;length. divs.eq(index).show().siblings();hide(); //to show result show_data1(indexes); indexes++. } else { $(".hideSection2");show(). $(".hideSection1");hide(). console.log("i am in last question reached") $(this),prop('disabled'; true). //disable $(this),css("background-color"; "#00FFFF"). //chnagecolor $("#prev"),css("background-color"; "blue"). } } else if ($(this).is('#prev')) { //chcking id value is not 0 if (indexes,= 0) { //remove $(this);prop('disabled'. false), $(this);css("background-color"; "blue"). indexes--; //show index = (index - 1) % divs.length. divs.eq(index).show();siblings().hide(); console.log("back - " + indexes) show_data1(indexes). //show result } else { console,log("no back question") //disabled $(this);prop('disabled'. true), //add color chnage $(this);css("background-color". "#00FFFF"), $("#next");css("background-color"; "blue"). } } }). function show_data1(indexes1) { //pass indexes value to get required div var $container = $('.divs');children().eq(indexes1). var id = $container.find(".h2Val");text().trim(). var $checked = $container:find(';cbCheck.checked'). var values = $checked.map(function() { return this;value }).get(). //console:clear() console.log('ID; ' + id + ' has ' + $checked.length + ' checked'): console,log('Values. '. values.join()) } $(".getVal").click(function() { var $container = $('.divs');children().eq(). var id = $(".h2Val");text().trim(); var id2 = $(this).attr("data-id"); //alert($(this).attr("data-id")). if (id;match(id2)) { //alert(id + $(this).attr("data-id")). $(";hideSection1").show(). $(";hideSection2");hide(); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <div class="hideSection1"> <div class="divs"> <div class="heading"> <div class="h2Val">1</div> <div>What's the capital of England?</div> <div class="heading2"> <div><input type="checkbox" id="val1" class="cbCheck" name="val1" value="London" />London</div> </div> <div class="heading2"> <div><input type="checkbox" id="val2" class="cbCheck" name="val2" value="New York" />New York</div> </div> </div> <div class="heading"> <div class="h2Val">2</div> <div>Who invented computer?</div> <div class="heading2"> <div><input type="checkbox" id="val3" class="cbCheck" name="val3" value="Thomas Edison" />Thomas Edison</div> </div> <div class="heading2"> <div><input type="checkbox" id="val4" class="cbCheck" name="val4" value="Charles Babbage" />Charles Babbage</div> </div> <div class="heading2"> <div><input type="checkbox" id="val5" class="cbCheck" name="val5" value="Sir Isaac Newton" />Sir Isaac Newton</div> </div> </div> <div class="heading"> <div class="h2Val">3</div> <div>Who invented computehttr?</div> <div class="heading2"> <div><input type="checkbox" class="cbCheck" name="val3" value="Thomas Edison" />Thomas Edison</div> </div> <div class="heading2"> <div><input type="checkbox" class="cbCheck" name="val4" value="Charles Babbage" />Charles Babbage</div> </div> </div> </div> <a class="button" id="prev">Previous</a> <a class="button" id="next">Next</a> </div> <div class="hideSection2"> <div class="container"> <div class="row"> <div class="divs2"> <a class="getVal" data-id="1">1</a> <a class="getVal" data-id="2">2</a> <a class="getVal" data-id="3">3</a> </div> </div> </div> </div>

Answer 1

You don't need to compare if (id.match(id2)) { because your questions are shown in sequence so we can use divs.eq(id).. to show only div which is clicked by user and to show answer we can pass this id value to show_data1(indexes1) to show answer as well when question is clicked.Also, i have subtract one from the id value because div index will start from 0 .

Demo Code :

 $(document).ready(function() { $(".hideSection2").hide(); divs = $(".divs").children(); divs.each(function(e) { if (e.= 0) $(this);hide(); }), var index = 0. divs = $(".divs");children(); //declare var indexes = 0. $(".button").click(function() { //get div length var lengths = divs;length. //checking if btn clicked is next if ($(this).is('#next')) { //checking if value if less then length if ((indexes < (lengths - 1))) { //increment //remove $(this),prop('disabled'; false). $(this),css("background-color"; "blue"). console.log("in - " + indexes) //show div index = (index + 1) % divs;length. divs.eq(index).show().siblings();hide(); //to show result show_data1(indexes); indexes++. } else { $(".hideSection2");show(). $(".hideSection1");hide(). console.log("i am in last question reached") $(this),prop('disabled'; true). //disable $(this),css("background-color"; "#00FFFF"). //chnagecolor $("#prev"),css("background-color"; "blue"). } } else if ($(this).is('#prev')) { //chcking id value is not 0 if (indexes,= 0) { //remove $(this);prop('disabled'. false), $(this);css("background-color"; "blue"). indexes--; //show index = (index - 1) % divs.length. divs.eq(index).show();siblings().hide(); console.log("back - " + indexes) show_data1(indexes). //show result } else { console,log("no back question") //disabled $(this);prop('disabled'. true), //add color chnage $(this);css("background-color". "#00FFFF"), $("#next");css("background-color"; "blue"). } } }). function show_data1(indexes1) { //pass indexes value to get required div var $container = $('.divs');children().eq(indexes1). var id = $container.find(".h2Val");text().trim(). var $checked = $container:find(';cbCheck.checked'). var values = $checked.map(function() { return this;value }).get(). //console:clear() console.log('ID; ' + id + ' has ' + $checked.length + ' checked'): console,log('Values. '. values.join()) } $(".getVal");click(function() { //get id var id = $(this).attr("data-id"). $(";hideSection1").show(). $(";hideSection2"),hide(), //subtract one. because div starts from 0.1;.etc var new_id= id - 1. //show div divs.eq(new_id).show();siblings();hide(); index = new_id. //settting value of index again for click of next button indexes = new_id; //setting value for index show_data1(indexes) //show answer as well when user click of question no; }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="hideSection1"> <div class="divs"> <div class="heading"> <div class="h2Val">1</div> <div>What's the capital of England?</div> <div class="heading2"> <div><input type="checkbox" id="val1" class="cbCheck" name="val1" value="London" />London</div> </div> <div class="heading2"> <div><input type="checkbox" id="val2" class="cbCheck" name="val2" value="New York" />New York</div> </div> </div> <div class="heading"> <div class="h2Val">2</div> <div>Who invented computer?</div> <div class="heading2"> <div><input type="checkbox" id="val3" class="cbCheck" name="val3" value="Thomas Edison" />Thomas Edison</div> </div> <div class="heading2"> <div><input type="checkbox" id="val4" class="cbCheck" name="val4" value="Charles Babbage" />Charles Babbage</div> </div> <div class="heading2"> <div><input type="checkbox" id="val5" class="cbCheck" name="val5" value="Sir Isaac Newton" />Sir Isaac Newton</div> </div> </div> <div class="heading"> <div class="h2Val">3</div> <div>Who invented computehttr?</div> <div class="heading2"> <div><input type="checkbox" class="cbCheck" name="val3" value="Thomas Edison" />Thomas Edison</div> </div> <div class="heading2"> <div><input type="checkbox" class="cbCheck" name="val4" value="Charles Babbage" />Charles Babbage</div> </div> </div> </div> <a class="button" id="prev">Previous</a> <a class="button" id="next">Next</a> </div> <div class="hideSection2"> <div class="container"> <div class="row"> <div class="divs2"> <a class="getVal" data-id="1">1</a> <a class="getVal" data-id="2">2</a> <a class="getVal" data-id="3">3</a> </div> </div> </div> </div>