JS автоматизировать смену всплывающих окон

У вас получается 2 элемента с id="message-purchased".

id нельзя повторять, от должен быть один

Ravager_, получается, что если у меня 10-20 всплывающих друг за другом окон, нужно указанный мною js увеличить в 10-20 раз прописав в каждом свой id?

Как-то сократить это можно?

Спасибо!

<script type="text/javascript">
'use strict';
jQuery(document).ready(function () {
if (jQuery('#message-purchased').length > 0) {
var data = jQuery('#message-purchased').data();
var notify = woo_notification;
notify.loop = data.loop;
notify.init_delay = data.initial_delay;
notify.total = data.notification_per_page;
notify.display_time = data.display_time;
notify.next_time = data.next_time;
notify.init();
}

jQuery('#notify-close').on('click', function () {
woo_notification.message_hide();
});
});


var woo_notification = {

init : function () {
setTimeout(function () {
woo_notification.message_show();
}, this.init_delay * 10);
if (this.loop) {
this.intel = setInterval(function () {
woo_notification.get_product();
}, this.next_time * 10);
}
},
message_show: function () {
var count = this.count++;
if (this.total <= count) {
window.clearInterval(this.intel);
return;
}
var message_id = jQuery('#message-purchased');
if (message_id.hasClass('fade-out')) {
jQuery(message_id).removeClass('fade-out');
}
jQuery(message_id).addClass('fade-in').show();
this.audio();
setTimeout(function () {
woo_notification.message_hide();
}, this.display_time * 1000);
$("#okno2").hide();
setTimeout('$("#okno1").hide();$("#okno2").show("slow");',5000);
},

message_hide: function () {
var message_id = jQuery('#message-purchased');
if (message_id.hasClass('fade-in')) {
jQuery(message_id).removeClass('fade-in');
}
jQuery('#message-purchased').addClass('fade-out');
},
get_product : function () {
jQuery.ajax({
type : 'POST',
data : 'action=woonotification_get_product',
url : wnotification_ajax_url,
success: function (html) {
var content = jQuery(html).children();
jQuery("#message-purchased").html(content);
woo_notification.message_show();
jQuery('#notify-close').on('click', function () {
woo_notification.message_hide();
});
},
error : function (html) {
}
})
},
close_notify: function () {
jQuery('#notify-close').on('click', function () {
woo_notification.message_hide();
});
},
audio : function () {
if (jQuery('#woocommerce-notification-audio').length > 0) {
var audio = document.getElementById("woocommerce-notification-audio");
audio.play();
}
}
} 
</script>

<div id="message-purchased" class="customized" style="display: none;"
data-loop="0" //цикл
data-initial_delay="0" //начальная задержка
data-notification_per_page="30" //уведомление на странице
data-display_time="10" // время отображения
>
<div id="okno1">
<img width="470" height="557" src="http://static7.smi2.net/img/80x80/3161293.jpeg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="43" srcset="http://static7.smi2.net/img/80x80/3161293.jpeg 470w, http://static7.smi2.net/img/80x80/3161293.jpeg 370w" sizes="(max-width: 470px) 100vw, 470px" />
<p>Someone in Washington, D.C., United States purchased a <a href="http://new2new.com/authentic/shop/ut-enim-ad-minim/?link=9aefd6fa5b">Evva</a>
<small>About 4 hours ago</small>
</p>
</div>
<div id="okno2">
<img width="470" height="557" src="http://static7.smi2.net/img/80x80/3161293.jpeg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="43" srcset="http://static7.smi2.net/img/80x80/3161293.jpeg 470w, http://static7.smi2.net/img/80x80/3161293.jpeg 370w" sizes="(max-width: 470px) 100vw, 470px" />
<p>Someone in Washington, D.C., United States purchased a <a href="http://new2new.com/authentic/shop/ut-enim-ad-minim/?link=9aefd6fa5b">Evva</a>
<small>About 4 hours ago</small>
</p>
</div>
<span id="notify-close"></span>
</div> 

Samail, спасибо!

Буду дальше разбираться