Load multiple modals dynamically

I have HTML on my index.php page which is a JQuery modal box (hidden by default)

I then have this function which shows the modal and fills its title and content.

When i call this, it replaces any previous content in the modal as it has the same ID.

Is there a way I can create the modals dynamically to show multiple all behind each other

function LoadModalBody(content, title) {
    title = title || '';

    $( "#modal_page" ).fadeIn("slow");
    $( "#modal_title" ).html(title);

    $("#modal_close_button").click(function(){ CloseModal(); });

    $( "#modal_page_body" ).html(content);

    //$("html, body").animate({ scrollTop: 0 }, "slow");
}

The function to close the modal is this:

function CloseModal(reloadflag) {
    reloadflag = reloadflag || '';

    $("#modal_page").fadeOut();

    if(reloadflag === 'Y') {
        location.reload();
    }
}

I thought of creating an ID for each modal inside the function so they are unique and display each one this way but im not too sure this is the best way