Add random div-like values ​​to multiple elements every 60 seconds

Question

I have a page that looks like this:

<a href="#" onclick="go('register')">
      <img class="img" src="img/192.webp" alt="box set" />
      <div class="name" style="line-height: 2">box set</div>
    </a>
  </div>
  <div class="item ">
    <a href="#" onclick="go('register')">
      <img class="img" src="img/182.webp" alt="battery" />
      <div class="name" style="line-height: 2">battery</div>

I was wondering if there was a way to randomly insert a div with class "percentx" (a random number between 1-100) so that when the page loads, it would look like:

<a href="#" onclick="go('register')">
      <img class="img" src="img/192.webp" alt="box set" />
      <div class="name" style="line-height: 2">box set</div>
      <div class="percent75"></div>
    </a>
  </div>
  <div class="item ">
    <a href="#" onclick="go('register')">
      <img class="img" src="img/182.webp" alt="battery" />
      <div class="name" style="line-height: 2">battery</div>
      <div class="percent61"></div>

Then change every 60 seconds:

<a href="#" onclick="go('register')">
      <img class="img" src="img/192.webp" alt="box set" />
      <div class="name" style="line-height: 2">box set</div>
      <div class="percent21"></div>
    </a>
  </div>
  <div class="item ">
    <a href="#" onclick="go('register')">
      <img class="img" src="img/182.webp" alt="battery" />
      <div class="name" style="line-height: 2">battery</div>
      <div class="percent95"></div>

About this topic:

$('.percent').each(function () {
  var x = Math.floor((Math.random() * 100) + 1);
  $(this).text(x)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="percent"></div>

I honestly have no idea how to modify this code to suit my needs, any help would be greatly appreciated.

Answer 1

Looking at the code snippet you provided, you can use $('div[class*="percent"]') to select class names that contain the substring 'percent'. If you want a random percentage of each div to be unique, I recommend using ID names. Otherwise, the solution below will overwrite all class names containing 'percent' every 60 seconds and replace them with 'percentx', where x is a randomly generated number. Hope this helps!

<div class="percent"></div>
<div class="percent"></div>
<div class="percent"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
setInterval(function() {
    $('div[class*="percent"]').each(function () {
            var x = Math.floor((Math.random() * 100) + 1);
            $(this).attr('class', 'percent' + x);
    });
}, 60000);
</script>