I am struggling and in need of help. I have been trying to rotate divs on click using jQuery, which was successful until I had two sets of divs that needed to be rotated independently on the same page. When clicking on the arrows to rotate the content in the second set, both sets of divs are rotating simultaneously. I want them to be separate so that each group can be rotated independently.
$(document).ready(function(){
$("#cslide-slides").cslide();
}); /*=Slides
----------------------------------------------- */
.cslide-slides-master {
overflow: hidden;
}
.cslide-slides-master:last-child {
margin-bottom: 0; }
.cslide-slides-container {
visibility: hidden; }
.cslide-slide {
float: left;
}
/* prev next buttons */
.cslide-prev-next {
display: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.cslide-prev, .cslide-next {
display: inline-block;
float: right;
padding: 10px 5px;
cursor: pointer; }
.cslide-prev.cslide-disabled:hover,
.cslide-next.cslide-disabled:hover {
}
.cslide-disabled {
opacity: 0.3; }<div id="Cell">
<section id="cslide-slides" class="cslide-slides-master clearfix">
<div class="cslide-slides-container clearfix">
<div class="cslide-slide">h4>Insert update headline here</h4>
<p>Some text that describes this update</p>
</div>
<div class="cslide-slide">h4>Update 2</h4>
<p>Some text that describes this update</p>
</div>
<div class="cslide-slide"><h4>Update 3</h4><p>Some text that describes this update</p>
</div>
<div class="cslide-slide">h4>Update 4</h4><p>Some text that describes this update</p>
</div>
<div class="cslide-slide"><h4>Update 5</h4><p>Some text that describes this update</p>
</div>
</div>
<div class="cslide-prev-next clearfix"><span class="cslide-next"><img src="images/Arrows_navigation_right.png" alt="Right" width="20" height="20"></span>
<span class="cslide-prev"><img src="images/Arrows_navigation_left.png" alt="Left" width="20" height="20"></span>
</div>
</section><!-- /sliding content section -->
</div>
<p> </p>
<div id="Cell">
<p class="line"> </p>
<section id="cslide-slides" class="cslide-slides-master clearfix">
<div class="cslide-slides-container clearfix">
<div class="cslide-slide"><h4>Insert update headline here</h4>
<p>Some text that describes this update</p>
</div>
<div class="cslide-slide"><h4>Update 2</h4>
<p>Some text that describes this update</p><a href="PolicyUpdates.html#PolicyUpdate2">Read more</a>
</div>
<div class="cslide-slide"><h4>Update 3</h4><p>Some text that describes this update</p>
</div>
<div class="cslide-slide"><h4>Update 4</h4><p>Some text that describes this update</p>
</div>
<div class="cslide-slide"><h4>Update 5</h4><p>Some text that describes this update</p>
</div>
</div>
<div class="cslide-prev-next clearfix"><span class="cslide-next"><img src="images/Arrows_navigation_right.png" alt="Right" width="20" height="20"></span>
<span class="cslide-prev"><img src="images/Arrows_navigation_left.png" alt="Left" width="20" height="20"></span>
</div>
</section><!-- /sliding content section -->
</div>
<script type="text/javascript" src="jquery.cslide.js">