// create a bs toast in the status_container
function StatusMsg(st)
{
    // look for first '.hide' in #status_container (there may be more than 1)
    if( $('.toast.hide').length !== 0 )
    {
        tid=$('.toast.hide').first().attr('id')
        $('#'+tid ).find( '.toast-body').html(st.message)
        $('#'+tid ).removeClass( function( index, className ) { return (className.match( /(^|\s)bg-\S+/g) || []).join(' ') } )
        $('#'+tid ).addClass( 'bg-' + st.alert )
        $('#'+tid ).toast("show")
    }
    else
    {
        tmp=$('.toast').last().attr('id')
        if( tmp== '' )
            tid=1
        else
        {
            // skip 'st'
            tid=tmp.substr(2)
            tid++
        }
        div='<div id="st' + tid + '" class="toast hide align-items-center text-white border-0 bg-' + st.alert
        div += `" role="alert" aria-live="assertive" aria-atomic="true">
                <div class="d-flex">
                    <div class="toast-body">
                    `
        div += st.message
        div += `
                    </div>
                    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
            </div>
            `
        // can be appended straight after st1 as the .toast("show") deals with display ordering
        $('#st1').append(div)
        $('#st' + tid ).toast("show")
    } 
}