progressbar html tag change

I’am working on progressbar that change the level when reaching some point.
The code.
I want to change the text under the progressbar when the progressbar reach 100 or above 90.
I could change it once but I want to go to next level, like this.
silver ==> gold ==> diamond ==> and more

const step = 5;
var content=document.getElementById('mylevel').innerHTML;

const updateProgress = () => {
  const currentWidth = Number(document.getElementById("progressvalue").style.width.replace( "%", ""));
  
  if (currentWidth>=100) {
    return;
  }
  else {
    document.getElementById("progressvalue").style.width = `${currentWidth+step}%`;
  }

    if (currentWidth > 90) {
    
      document.getElementById("mylevel").textContent = "gold";
      document.getElementById("progressvalue").style.width = "0%";
    }
      if (currentWidth > 90 && content == "gold") {
    
      document.getElementById("mylevel").textContent = "diamond";
      document.getElementById("progressvalue").style.width = "0%";
    }
}

const restart = () => {
  document.getElementById("progressvalue").style.width = "0%";
}
.progress {
  background-color: #ededed;
  width: 100%;
  overflow: hidden;
}
#progressvalue {
  height: 40px;
  background-color: lightgreen;  
  width: 0%;
}
<div class="progress">
  <div id="progressvalue"></div>
  
</div>
<p id="mylevel">silver</p>
<br />
  
<button type="button" onclick="updateProgress()">
  Update Progress
</button>
  
<button type="button" onclick="restart()">
  Restart
</button>

When the updateprogress is above 90 the silver change to gold, but I need to change again to diamond when the updateprogress is again above 90.
Am I putting the if condition in a wrong place, I tried many times.
I don’t know what I’am missing and am new with JavaScript

I started the code but got help here to make it much better (80% of the code done by
teresaPap thanks)