Meta tags not Changing

Why is this code not changing meta contents for a single page blog website on mobile devices?
when a blog is clicked, the code is expected to change some meta tags like og:url, og:description, og:image etc to the currently displayed blog post.

The code gets the blogId from the url and check if it is null or not then change the meta tags accordingly. This code works perfectly on desktop pc, but it doesn’t work on mobile. when I view the page source on mobile, nothing is changed. But when I view it on a Desktop the meta tags are updated accordingly.

here is the code

const queryString = window.location.search;
  const urlString = new URLSearchParams(queryString);
  const blogId = urlString.get("blog_id");
if (blogId == null) {
    jQuery("meta[property='og:title']").attr("content", "Nonny Portfolio | Website Blog");
    jQuery("meta[property='og:description']").attr("content", "Nonny is software engineer, fullastack web developer based in Nigeria. This site shows his portfolio and blog");
    jQuery("meta[property='og:image']").attr("content", $("link[rel='canonical']").attr("href") + "assets/image/PXL_20230320_145608575.jpg");
  } else {
    jQuery("meta[property='og:title']").attr("content", jQuery("body .intro #blog .blog .blog-div .blog-posts[data-id=" + blogId + "] .blog-text .title-text").text());
    jQuery("meta[property='og:description']").attr("content", jQuery("body .intro #blog .blog .blog-div .blog-posts[data-id=" + blogId + "] .blog-text .blog-writing").text());
    jQuery("meta[property='og:image']").attr("content", $("link[rel='canonical']").attr("href") + jQuery("body .intro #blog .blog .blog-div .blog-posts[data-id=" + blogId + "] .blog-ui").attr("data-src"));
    console.log(jQuery("body .intro #blog .blog .blog-div .blog-posts[data-id=" + blogId + "] .blog-ui").attr("data-src"));
  }