Creating divs for each data-CodePudding

I trying to create divs for each data, To put it mildly, what I'm trying to do is, When I post, it will be added to the database The data I add on the post list page will be created in a different divde separate from other data

My Html

<head>
  <link rel="stylesheet" href="/css/postList.css">
</head>

<body>
 <div >
 </div>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="js/listPost.js"></script>

Connected JS file

$(function () {
  $.getJSON("/admin/getposts", function (data) {
    $(".postsMain").empty();
    $.each(data, function (i, item) {
      console.log("Data girdi") 
      var alt = $("<div>", {
        class: "postsAlt"
      }).appendTo(".postsMain");
      $("<p>").html(item.title).appendTo(alt);
      console.log('Başarıyla data çekildi'); 
    });
  });
});

Data's i get from JS file

[
    { "title": "Https test ", "content": "https://endorfintr.tk", "sharer": "EndorfinTR" },
    { "title": "a", "content": "ÇAYLARRRRR", "sharer": "DataBaseTester", "editer": "EndorfinTR" },
    {
        "title": "Bakım sürecinin ui bitti! ",
        "content": "Bakım sürecinin uinden fazlasına girmis bulunmaktayız, bu süreçte adminleri ve siteyi kökten etkileyecek bir sürü ekleme yapıldı. Örneğin Post ekleme, post silme benzeri şeyler eklendi. /n Bakım sürecinin bitiminde görüşmek üzere