Comment section for webpage not able to see comments on another device

So, I want to make a comment section on my webpage and I’m using JS, JQUERY and HTML but I do not know enough to change my code so please give me the code I need instead of saying just do this. example of what not to do: Oh, you need a database (I already know that). Ok let’s get to the point. When I open the .html file on a different device, the comments are gone, and this is because I am using JS localStorage which stores the comments on the device it was written on so now let’s get to the real point I need a database. But I do not know how to make one. This is what I’m using or think I need to make the database: Xampp. Here is my code:

    function render(data) {
    var html = "<div class='commentBox'><div class='rightPanel'><span class='uu'>"+data.name+"</span><div class='date'>"+data.date+"</div><p class='ww'>"+data.body+"</p><div class='clear'></div></div></div><br>";
    $('#container').append(html);
    
    
} 


$(document).ready(function() {
var comment = [];

if(!localStorage.commentData3) {
    localStorage.commentData3 = [];
} else {
    comment = JSON.parse(localStorage.commentData3);
}

//var Talk1 =  localStorage.commentData3;

for(var i=0; i<comment.length; i++){
    render(comment[i]);
}

$('#addComment').click(function() {
    var addObj = {
        "name": $('#name').val(),
        "date": $('#date').val(),
        "body": $('#bodyText').val()
    };
    
    //console.log(addObj);
    comment.push(addObj);
    localStorage.commentData3 = JSON.stringify(comment);
    render(addObj);
    $('#name').val('');
    $('#date').val('');
    $('#bodyText').val('');
});

});

    body {
      background-image: url("background.jpg");
      font-family: "Comic Sans MS";
    }
    
    .middle {
      width: 50%;
      margin: auto;
      background: white;
      border: 1px solid white;
      padding: 2rem;
      border: 2px solid #636363;
    }
    
    a { color: #cd90b0; }
    a:hover { color: #dfc3d2; }

.form {
  border: 1px solid #000000;
  text-align: center;
  padding: 2.5rem;
  background-color: #dfc3d2;
}

.hw {
  text-align: center;
  color: #cd90b0;
}

.hideIt { #visibility: hidden; }

.leftPanelImg img {
  border-radius: 100%;
}

.jj {
  background-color: #eeeeee;
  padding: 1rem;
}

.hh {
  background-color: #eeeeee;
  padding: 1rem;
}

.mm {
  background-color: #f3f6f4;
  padding: 1rem;
}

.commentBox {
  border-bottom: 1px solid #796f6f;
  border-top: 1px solid #796f6f;
  background-color: #e2e2e2;
  padding: 1rem;
}

.uu {
  padding-left: 1rem;
  padding-right: 1rem;
  #background-color: #ffffff;
}

.ww {
  background-color: #efecec;
  padding-bottom: 0.5rem;
  padding-top: 0.5rem;
  padding-right: 0.3rem;
  padding-left: 0.3rem;
  border: 1.5px solid #dfc3d2;
}

.date {
  padding-left: 1rem;
  padding-right: 1rem;
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div class="middle">
    <div class="hideIt">
    <div class="hw"><h4>Comment Below:<h4></div>
    <div id="container">
      
    </div>
    <br>
    <br>
    <br>
    <div class="form">
    <form action="post-comment.php">
      <input type="text" id="name" placeholder="Name..."></input><br />
      <input type="date" id="date" placeholder="Date..."></input><br />
      <textarea rows="5" col="30" id="bodyText" placeholder="Type your body here..."></textarea><br />
      <input type="button" id="addComment" value="Add Comment">
      </form>
    </div>
    </div>
    <br><br><br><br>
    </div>

please tell me the code for what database I need




                                          thanks!