PHP – форма не отправляет $_POST в текст Div

Я не могу получить этот div «about_me_container» в этой форме для отправки $_POST. Я понимаю, что элементы div не предназначены для использования с $_POST, поэтому я изменил элемент div на input type="text" и textarea, но он все равно не будет работать. Я также попытался добавить текст из «about_me_container» в «hidden_about_me» через Javascript. Что я делаю не так? Или ты можешь просто указать мне правильное направление? Спасибо

моястраница.php

<?php
    if ($_SERVER['REQUEST_METHOD'] == 'POST') {
        if (isset($_POST['about_me_container']) && $_SESSION['logged_in'] == true) {
            $username = $_SESSION['username'];
            
            echo htmlspecialchars($_POST['about_me_container']);
            
        }
        else if (isset($_POST['hidden_about_me']) && $_SESSION['logged_in'] == true) {
            $username = $_SESSION['username'];
            
            echo htmlspecialchars($_POST['hidden_about_me']);
            
        }
    }

?>

<form id = "about_me_text" action = "mypage.php" method = "post">
    <div id = "about_me_title_row"> 
        <label for = "about_me_label"><h3>About Me</h3></label> 
        <input type = "submit" class = "mypage_button" id = "edit_about_me" value = "Edit">
        <input type = "submit" class = "mypage_button" id = "okay_about_me" value = "Ok">
    </div>

    <div class = "about_me_flex">
    <div id = "about_me_containment">

    <div id = "about_me_container" contenteditable = "false"></div>

    <input type = "hidden" name = "hidden_about_me" id = "hidden_about_me" value = ""/>

    </div>
</form>

моястраница.js

window.onload = function() {

    let editAboutMe = document.querySelector("#edit_about_me");
    let okayAboutMe = document.querySelector("#okay_about_me");

    let aboutMeContainer = document.querySelector("#about_me_container");
    let hiddenAboutMe = document.querySelector("#hidden_about_me");

    editAboutMe.addEventListener("click", editAboutMeText);
    okayAboutMe.addEventListener("click", okayAboutMeText);

    function editAboutMeText(e) {
        aboutMeContainer.contentEditable = "true";
        //aboutMeContainer.removeAttribute("readonly");
        aboutMeContainer.style.backgroundColor = "white";
        e.preventDefault();
    }

    function okayAboutMeText(e) {
        aboutMeContainer.contentEditable = "false";
        //aboutMeContainer.setAttribute("readonly", "");
        aboutMeContainer.style.backgroundColor = "lightcyan";
        moveHiddenText(e);
        e.preventDefault();
    }
    
    function moveHiddenText(e) {
        hiddenAboutMe.value = aboutMeContainer.innerText;
        e.preventDefault();
    }
}