I am facing a unique situation on my website where I have multiple popovers (pop1), (pop2), (pop3) that are triggered in sequence when the "Next" button is clicked. These popovers appear one after the other without direct access to them individually.
If you want to see how this process works, check out this jsbin example: http://jsbin.com/akutis/5/edit (be sure to click on "run with JS")
My goal is to apply CSS actions, like changing the background-color, specifically when pop2 appears. Unfortunately, my attempts so far have been limited. Any suggestions on how to achieve this using JQuery?
var counter = 0;
$("#NextBtn").click(function() {
if (currentPopover >= 0) {
popovers[currentPopover].popover('hide');
}
currentPopover = currentPopover + 1;
popovers[currentPopover].popover('show');
counter = counter + 1;
if (counter === 2) {
$("#main_container").css("background-color", "red");
}
});