How to Add Dynamic Meta tags Using php

I Fetch Data From Laravel API and I want to show dynamic meta title and description but when i set dynamic data in inspect element it show’s dynamic values but not updated in page source and also when share on social media like whatsapp, facebook etc it not showing dynamic title and description.

Here is My Code..

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="theme-color" content="#084594" />
<meta property="og:title" id='metaTitle' content="Static Title">
<meta property="og:description" id='metaDescription' content="Static Description">

Now I am Change it Using Jquery

<script>
$(document).ready(function() {
  const API = "<?= API ?>";
  $('#metaTitle').attr('content','Dynamic Title')
  $('#metaDescription').attr('content','Dynamic Description')
  function getCategory() {
   
    $.ajax({
      type: "get",
      url: `${API}/all_category`,
      success: function(response) {
        console.log("responseCat", response.category);
        $.each(response.category, function(key, item) {
          let cat = item.name.split(' ')[0];
          $("#filter").append(
            `<li data-filter=".${cat}"><a href="#">${item.name}</a></li>`
          );
        });
        isotopFilter();
      },
    });
  }

  function getPortfolio() {
    $.ajax({
      type: "get",
      url: `${API}/all_portfolios`,
      success: function(response) {
        console.log("responseCat", response.portfolio);
        $.each(response.portfolio, function(key, item) {
          let cat = item.category.split(' ')[0];
          let url_title = item.title.toLowerCase().replace(/[ ().]/g, '-');
          url_title = url_title.replace('--', '-');
          $(".masonry_wrapper").append(
            `<div class="col-md-4 col-sm-6 flex-active item ${cat}"><div class="tutorial_card"> <div class="service-content"> <a href="portfolio/${url_title}" > <h3>${item.title}</h3></a > </div><div class="read"> <a href="portfolio/${url_title}" class="btn btn-default" >View Portfolio</a > </div></div></div`
          );
        });
        isotopFilter();
      },
    });
  }

  
  getCategory();
  getPortfolio();
});

But It is showing Static Title And Description in ctrl + u Page Source code But In Inspect Elements It change With Dynamic Title And Description.
And Also When Share Page It Shows Static Title And Description