client-side script of my real tiem chat

const socket = io("http://localhost:3000");
message_form = document.getElementById("send_form");

function User(name_){
    this.name = name_;
    this.message= new Message();
    this.create_new_message = true;
    this.class_prefix = this.name;
    this.username = "";
}

function Message(){
    this.parent = null;
    this.backround = document.getElementById("test");
    this.text = document.getElementById("test");
}

this_user = new User("this");
partner_user = new User("partner");

socket.on("new_partner", recieved_data => {
    partner_user.username = recieved_data;
    socket.emit("logged_in", this_user.username);
});

socket.on("sent_message", data => {
    DoMessage(data, partner_user);
});

function DoMessage(message, user){
    allowed_keys = " ¸1234567890'+qwertzuiopšđasdfghjklčćžyxcvbnm,.-<¨!\"#$%&/()=?*QWERTZUIOPŠĐASDFGHJKLČĆŽ>YXCVBNM;:_¨~ˇ^˘°˛`˙´˝¨¸|€÷×[]łŁß¤@{}<>";
    console.log(message);

    if(allowed_keys.includes(message)||message==""){
        if(user.create_new_message==true){
            NewMessage(user);
        }
        PlayAnimation(user.message.backround, "type_anim");
        user.message.text.innerHTML+=message;
    }
    else if(message == "Enter"){
        if(user.message.text.innerHTML!=""){
            SetEndAnimation(user);
            PlayAnimation(user.message.backround, "end_message_anim");
            user.create_new_message = true;
            DoMessage("", user);

        }
    }
    else if(message == "Backspace"){
        if(user.message.text.innerHTML!=""){
            cur_message = user.message.text.innerHTML;
            user.message.text.innerHTML=cur_message.substring(0,cur_message.length-1);
        }
    }
    if(user.name=="this") socket.emit("send_message", message);
}

function NewUsernameHeader(message_container_, user){
    username_header_element = $("<div></div>");
    $(username_header_element).attr("name", user.username);
    class_ = user.class_prefix+"_username_parent";
    $(username_header_element).addClass(class_);

    username_header_backround = $("<div></div>");
    class_ = user.class_prefix+"_username_backround";
    $(username_header_backround).addClass(class_);
    $(username_header_element).append(username_header_backround);
    user.message.backround = username_header_backround[0];

    username_header_text = $("<p>"+user.username+"</p>");
    class_ = user.class_prefix+"_username_text";
    $(username_header_text).addClass(class_);
    $(username_header_element).append(username_header_text);
    user.message.text = username_header_text[0];

    $(message_container_).append(username_header_element);
    SetEndAnimation(user);
    PlayAnimation(user.message.backround, "end_message_anim");
}

function NewMessage(user){
    user.create_new_message=false;

    message_container = document.getElementById("message_container");

    if($(message_container).children().length==0 || $(message_container.lastChild).attr("name")!=user.username){
            NewUsernameHeader(message_container, user);
    }
    //NewUsernameHeader(message_container, user);

    message_element = document.createElement("div");
    $(message_element).attr("name", user.username);
    class_ = user.class_prefix+"_message_parent";
    message_element.classList.add(class_);
    user.message.parent = message_container.lastChild;


    message_backround = document.createElement("div");
    class_ = user.class_prefix+"_message_backround";
    message_backround.classList.add(class_);
    message_element.append(message_backround);
    user.message.backround = message_backround;


    message_text = document.createElement("p");
    class_ = user.class_prefix+"_message_text";
    message_text.classList.add(class_);
    message_element.append(message_text);
    user.message.text = message_text;

    message_container.append(message_element);
}

function PlayAnimation(ellement, animation_class){
    if(ellement.classList.contains(animation_class)){
        ellement.classList.remove(animation_class);
    }
    ellement.offsetWidth;
    ellement.classList.add(animation_class);
}

function SetEndAnimation(user){
    backround = user.message.backround;
    if(!backround.classList.contains("end_message_anim")){
        backround.classList.add("end_message_anim");
    }
    width =  user.message.text.offsetWidth;
    console.log("width "+width);
    backround.style.setProperty("--end_width", (width + 30)+"px");
}