How append a test in the same li inside of a list

Question

I Have a chat app get done with jQuery, I need some help I want append inside an <li> all the test is coming only when the time of creation is less the one second

this is my code

var lastDate = 0;

    function doLoopMsg(messages, memberData, roomName) {

        let box = "";
        // set name header
        $('.msgRecipientName').text(roomName);
        // order by date (asc)
        let messagesInOrder = _.orderBy(messages, function (a) { return a.createdOn }, 'asc');
        //console.log(messagesInOrder);
        $.each(messagesInOrder, function (key, msg) {


            if (new Date(msg.createdOn).getTime() - lastDate > 60 * 60 * 1000) {
                //console.log('more tem one hr');

                chatbox.append("<li class='list-msg''><div id='time-stamp'><div>" + formatDate(msg.createdOn) + "</div></div></li>");


            }

            if (new Date(msg.createdOn).getTime() - lastDate > 1000) {
                // start box
                chatbox.append("<li class='list-msg'><div id='msg-myself'>"+msg.message+"</div></li>");
            }

            if (new Date(msg.createdOn).getTime() - lastDate < 1000) {
                // my issue here I dont know how get done this

            }

            lastDate = new Date(msg.createdOn).getTime();
        });


    }   

I new any help please thanks.

Answer 1

First of all your code generates invalid HTML syntax. You can't have 2 or more elements with the same id . So better change that to class and change # to . in stylesheet:

chatbox.append("<li class='list-msg'><div class='msg-myself'>"+msg.message+"</div></li>");

To append the last li you can use this syntax:

$(chatbox).children('li').last().append(...);