JavaScript setInterval and setTimeout provide inconsistent timing - timer

Question

I am attempting to show 1 element at a time with a total of 3 elements. Each element fades in for 1 second, pauses for 2 seconds, then fades outs for 1 second. Thus, for all 3 elements, the total interval is 12 seconds (3 elements X 4 seconds each).
At first, everything appears to be working fine, but after a few intervals or so, the timing is inconsistent, and multiple elements will show at once.
Consequently, I have attempted to resolve my issue by searching for similar or equivalent questions to mine, and I have tried different methods (such as giving 1 second gap between element changes), but I get the same undesired results.
Any assistance is appreciated!
/**
* Stocks (Nasdaq, S&P 500, and Dow) —— Interval
* —————————————————————————————————————————————
*/
$(document).ready(function()
{
// Initialize stock HTML elements as variables
const nasdaq = $(".stocks .nasdaq");
const sp500 = $(".stocks .sp_500");
const dow = $(".stocks .dow");
// Hide all stock HTML elements upon DOM load (except Nasdaq)
nasdaq.show();
sp500.hide();
dow.hide();
// Run once before interval begins [00:00 —— 00:04]
nasdaq.delay(2000).fadeOut(1000);
// Run once before interval begins [00:04 —— 00:08]
sp500.delay(4000).fadeIn(1000).delay(2000).fadeOut(1000);
// Run once before interval begins [00:08 —— 00:12]
dow.delay(8000).fadeIn(1000).delay(2000).fadeOut(1000);
// Run interval for a every 12 seconds (4-second span per each stock)
setInterval(function() {
nasdaq.fadeIn(1000);
// Pause for 2 seconds before fading out
setTimeout(function() {
nasdaq.fadeOut(1000);
}, 3000);
// Pause for 2 seconds before fading in
setTimeout(function() {
sp500.fadeIn(1000);
}, 4000);
// Pause for 2 seconds before fading out
setTimeout(function() {
sp500.fadeOut(1000);
}, 6000);
// Pause for 2 seconds before fading in
setTimeout(function() {
dow.fadeIn(1000);
}, 8000);
// Pause for 2 seconds before fading out
setTimeout(function() {
dow.fadeOut(1000);
}, 10000);
}, 12000);
});
Additionally, I tried removing the setTimeout() function & used 3 setInterval() functions along with the delay() function that run at the same time, but I get the same undesired results.
// Run interval for a 4-second span every 12 seconds
setInterval(function() {
nasdaq.fadeIn(1000).delay(2000).fadeOut(1000);
}, 12000);
// Run interval for a 4-second span every 12 seconds
setInterval(function() {
sp500.delay(4000).fadeIn(1000).delay(2000).fadeOut(1000);
}, 12000);
// Run interval for a 4-second span every 12 seconds
setInterval(function() {
dow.delay(8000).fadeIn(1000).delay(2000).fadeOut(1000);
}, 12000);
UPDATE (CSS #keyframes solution): I know this may not be a solution for all situations that require an interval, but I created the desired results I'm seeking by using the #keyframes. Here's a CopePen example.