JavaScript setInterval is not working. I am having issue displaying the contents of a specific part of my html code so that it fades in and out

I am trying to display some text on my web page so that it fades off and comes back after some time intervals. The code below is the complete code for the both the html part, css, and the JS part. I have done everything possible but all to no avail. I just want the callback function to be continuously called at certain time. I don’t know if I am doing it correctly. Please someone should help. If my explanation does not provide enough clarity I can still explain further. Thank you.

  var listCountries = ['South Africa', 'USA', 'Germany', 'France', 'Italy', 'South Africa', 'Australia', 'South Africa', 'Canada', 'Argentina', 'Saudi Arabia', 'Mexico', 'South Africa', 'South Africa', 'Venezuela', 'South Africa', 'Sweden', 'South Africa', 'South Africa', 'Italy', 'South Africa', 'United Kingdom', 'South Africa', 'Greece', 'Cuba', 'South Africa', 'Portugal', 'Austria', 'South Africa', 'Panama', 'South Africa', 'South Africa', 'Netherlands', 'Switzerland', 'Belgium', 'Israel', 'Cyprus'];
  var listPlans = ['$5000', '$15,500', '$18,000', '$19,000', '$28,000', '$37,000', '$41,000', '$6,900', '$7,500', '$42,500'];
  var transarray = ['just <b>invested</b>', 'has <b>withdrawn</b>', 'is <b>trading with</b>'];
  let interval = Math.floor(Math.random() * (40000 - 8000 + 1) + 8000);
  var run = setInterval(request, interval);

  function request() {
    clearInterval(run);
   let interval = Math.floor(Math.random() * (40000 - 8000 + 1) + 8000);
    var country = listCountries[Math.floor(Math.random() * listCountries.length)];
    var transtype = transarray[Math.floor(Math.random() * transarray.length)];
    var plan = listPlans[Math.floor(Math.random() * listPlans.length)];
    var msg = 'Someone from <b>' + country + '</b> ' + transtype + ' <a href="javascript:void(0);" onclick="javascript:void(0);">' + plan + '</a>';
    $(".mgm .txt").html(msg);
    $(".mgm").stop(true).fadeIn(300);
    window.setTimeout(function () {
      $(".mgm").stop(true).fadeOut(300);
    }, 10000);
    run = setInterval(request, interval);
  }
The html code
<div class="mgm" style="display: none;">
    <div class="txt" style="color:black;"></div>
</div>

The CSS code
<style>
    ::ms-value {
        color: black;
    }

    .mgm {
        bottom: 180px;
    }


    h4 {
        color: white;
    }
</style>

<style type="text/css">
        .mgm {
            border-radius: 7px;
            position: fixed;
            z-index: 90;
            bottom: 45%;
            right: 50px;
            background: #fff;
            padding: 10px 27px;
            box-shadow: 0px 5px 13px 0px rgba(0, 0, 0, .3);
        }

        .mgm a {
            font-weight: 700;
            display: block;
            color: #1c8e51;
        }

        .mgm a,
        .mgm a:active {
            transition: all .2s ease;
            color: #1c8e51;
        }
</style>