I am working with a class that has multiple divs, each with a unique id attached to it. I am using jQuery to dynamically cycle through these divs.
This is a snippet of my HTML code:
<div id ="result">RESULT GOES HERE</div>
<div class = "tplandesclist">
<div id="tplandesc1"><%= tplan.tplandesc %></div>
<div id="tplandesc2"><%= tplan.tplandesc2 %></div>
<div id="tplandesc3"><%= tplan.tplandesc3 %></div>
<div id="tplandesc4"><%= tplan.tplandesc4 %></div>
<div id="tplandesc5"><%= tplan.tplandesc5 %></div>
<div id="tplandesc6"><%= tplan.tplandesc6 %></div>
<div id="tplandesc7"><%= tplan.tplandesc7 %></div>
<div id="tplandesc8"><%= tplan.tplandesc8 %></div>
</div>
In the jQuery section, I have written a function that triggers upon clicking an arrow element. It clears the content inside the #result div and then tries to append the next item below the parent div .tplandesclist. However, I suspect there is an issue in the way I am attempting this. I am currently using the .next() method instead of implementing a counter and redesigning the algorithm.
$(document).ready(function(){
$(".arrow").click(function(){
$("#result").html(' ');
$("#result").append().find(".tplandesclist")).next()
});
});
I would appreciate any assistance on resolving this issue!