View the recent appended input in chatbox and empty the textarea

Question

I am trying to create a chatbox for our project in WebDev. As I click send on the button provided, it will append the value from the textarea and will automatically delete or remove the recent input in the textarea.

I already tried to follow the instruction in this link emptying the textarea in IE but I didn't get it.

I am a first year college student in programming and I really know little to nothing in this matter.

    <form action="" class="form-container">
        <p><img src="" alt="logo">Nanon Virtual Assistant</p> <hr>
        <label for="msg" ><b>Message</b></label>
        <div id="chatbody">
            <img src="" alt="logo">
            <p>By using this service, I consent to provide my personal data in accordance to the Nanon Privacy Policy and applicable Philippine privacy laws.</p> <br>
            <div id="message"></div>
        </div>
        <textarea type="text" id="msg" placeholder="Type message" required></textarea>
        <button type="button" class="btn cancel" onclick="closeForm()">Close</button>
        <button type="button" class="btn send" onclick="send(); openmsg();">Send</button>
    </form>

function send() {var y = document.getElementById("msg").value;document.getElementById("message").innerHTML = y;}
function send() {const node = document.createElement("div"); const textnode = document.createTextNode(document.getElementById("msg").value); node.appendChild(textnode); document.getElementById("message").appendChild(node);}

#chatbody{overflow-y: auto; padding: 3vh 0 0 0; text-align: center; height: 30vh; background-color: #c9fcff50;}
#chatbody p{font-size: 2vh;}
#message{height: fit-content; width: 22vw;}
#message div{text-align: left; margin-left: auto; margin-right: 0; background-color: #299aa0; color: white; word-wrap: break-word; width: fit-content; max-width: 15vw; margin-top: 1.5vh;  padding: .5vw 2vw .5vw 2vw; border-radius: 25px; }

Sample image