PHP – Form doesn’t submit $_POST on a Div text

I cannot get this “about_me_container” div in this form to submit the $_POST. I understand divs aren’t meant to be used with $_POST so I changed the div into input type=”text” and textarea but it still will not work. I also tried to add the text from “about_me_container” to add to the “hidden_about_me” through Javascript. What am I doing wrong? Or can you just point me in the right direction? Thank you

mypage.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>

mypage.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();
    }
}