How to change the modal popup content based on array of object length using javaScript?

I have array of object data like below,

let loginMessages = [{ NotificationID: 123, NotificationName: "first Message", NotificationDesc: "First Message", ValidFrom: "2019-09-25T00:00:00", ValidTo: "2019-10-03T00:00:00" },
{ NotificationID: 456, NotificationName: "second Message", NotificationDesc: "Second Message", ValidFrom: "2019-09-25T00:00:00", ValidTo: "2019-10-03T00:00:00" }
];

Here, I displayed the first 123 notification modal popup on page loading. In that first notification modal I have Next button. If we click on Next button, that first popup should override with the second notification data. If the array of object length reached the last item, that time previous button should display.

I don't know how to do this. Please help me.

what I did is,

loginMessages.forEach((d) => {
let listMessag = document.getElementById("modal-content");
let listTitle = document.getElementById("modal-title");
$('#infoPopup2').modal('show');
let el = d.NotificationDesc;
let ele = d.NotificationName;
listMessag.innerHTML += el;
listTitle.innerHTML += ele;
});
<div class="modal fade settings-modal" id="infoPopup2" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content sp_modal_content auto-height" >
<div class="modal-header sp_modal_header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">
<img class="sp_modal_close_img" src="/images/button_close_small.png">
</span>
</button>
<h4 class="modal-title sp_modal_heading" id="modal-title"> </h4>
</div>
<div class="modal-body text-editor-p" id="modal-content">
</div>
<div class="modal-footer">
<div class="row">
<div class="col-sm-12">
<p class="pull-left">
<input type='checkbox' store="checkbox3" /> Don't show again
@*<input type='checkbox' store="checkbox2" />*@
</p>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<button type="button" id="next" class="sp_button sp_login_button pull-left">NEXT</button>
<p class="pull-right">2/3</p>
</div>
</div>
</div>
</div>
<!-- modal-content -->
</div>

</div>

This is my output,

here, two notifications data displaying in one popup. I need to display the second message popup separately by clicking next button.

You were just going through the arrays and displaying the values to html.

Try this. Current index will always show the 1st array, when the showNotification(currentIndex); is called.

Clicking next will increment the index and trigger the showNotification function again, with the index being updated.

let loginMessages = [
{ NotificationID: 123, NotificationName: "first Message", NotificationDesc: "First Message", ValidFrom: "2019-09-25T00:00:00", ValidTo: "2019-10-03T00:00:00" },
{ NotificationID: 456, NotificationName: "second Message", NotificationDesc: "Second Message", ValidFrom: "2019-09-25T00:00:00", ValidTo: "2019-10-03T00:00:00" }
];
let currentIndex = 0;
const modal = document.getElementById("modal");
const nextButton = document.getElementById("nextButton");
showNotification(currentIndex);
nextButton.addEventListener("click", () => {
currentIndex++;
showNotification(currentIndex);
});
function showNotification(index) {
const messages = loginMessages[index];
modal.innerHTML = 
`<p>ID: ${messages.NotificationID}</p>
<p>Name: ${messages.NotificationName}</p>
<p>Description: ${messages.NotificationDesc}</p>
<p>Valid from: ${messages.ValidFrom}</p>
<p>Valid to: ${messages.ValidTo}</p>
`;
}