I know this is a duplicate but for the life of me I cannot figure out why my basic code is not working. If anyone can dope slap me in the right direction I would greatly appreciate it. I want to be able to update any of the meta tags; description, og:description, etc...
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="" />
    <meta name="keywords" content="Online Learning" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:site" content="@mysite" />
    <meta property="og:url" content="https://online.mysite.com" />
    <meta property="og:title" content="" />
    <meta property="og:description" content="" />
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world! +</h1>
    <script src="//www.mysite.com/jquery-3.4.1.min.js"></script>
    <script src="/mysite.com/js/kube.js?t=1569848987"></script> 
    <script>
        $(document).ready(function(){ 
            $('meta[name=description]').attr('content', "new content descr");
        });
    </script>
  </body>
</html>
As well as the javascript below but neither has updated the description. I have placed the js below, at the bottom of the code as well as in the head.
document.getElementsByTagName('meta')["description"].content = "My new page description!!";
Thanks in advance for anyone who can dope-slap me in the right direction.