How to display only the highest "score" according to the text content inside each div?

I would like to archive the below by using JavaScript (or with jQuery). Here is the HTML structure:

<div class="score-set">
  <div class="score-item">A<div id="score">96+</div></div>
  <div class="score-item">B<div id="score">99</div></div>
  <div class="score-item">C<div id="score">99</div></div>
  <div class="score-item">D<div id="score">96-</div></div>
</div>
<div class="score-set">
  <div class="score-item">A<div id="score">86</div></div>
  <div class="score-item">B<div id="score">88</div></div>
  <div class="score-item">C<div id="score">90</div></div>
  <div class="score-item">D<div id="score">90+</div></div>
</div>
<div class="score-set">
  <div class="score-item">A<div id="score">83-</div></div>
  <div class="score-item">B<div id="score">83+</div></div>
  <div class="score-item">C<div id="score">76</div></div>
  <div class="score-item">D<div id="score">78</div></div>
</div>

The JavaScript will do the modification, and the desired results will be B 99 C90 A 83- , which looks like:

<div class="score-set">
  <div class="score-item">B<div id="score">99</div></div>
</div>
<div class="score-set">
  <div class="score-item">C<div id="score">90</div></div>
</div>
<div class="score-set">
  <div class="score-item">A<div id="score">83-</div></div>
</div>

The rules are:

1. Ignore all non-number in id="score", eg. + and -, and do the ranking.
2. Show one highest score item.
3. If two score items are the same in a set, show just one according to the div item sequence inside <div class="score-set">, ie. in the above example A > B > C > D.
4. When writing the result, write the original div item, including + or -.

>Solution :

To be able to do this, it would be best to get each individual score-set and treat one after another.

For each score item, we need to first get the score and transform it (Array#map) into a number with no digits (.replace(\/D+/g, ''))and memorize the score item html object.

Number(scoreItem.querySelector('div').innerText.replace(/\D+/g, ''))

We can then sort the remaining ones in descending order and simply take the first one of the list. Can be done with Array#sort and destructuring assignment.

.sort(({ score: scoreA }, { score: scoreB }) => scoreB - scoreA)

Then finally we update the score set html.

scoreSet.innerHTML = '';
scoreSet.appendChild(scoreItem);

const scoreSets = document.getElementsByClassName('score-set');

for(const scoreSet of scoreSets){
  
  const [{ scoreItem }] = Array
    .from(scoreSet.getElementsByClassName('score-item'))
    .map(scoreItem => ({
      scoreItem,
      // it would be better here to access the score using the id
      // but `score` is used multiple times which makes getting 
      // the score element unreliable
      score: Number(scoreItem.querySelector('div').innerText.replace(/\D+/g, ''))
    }))
    .sort(({ score: scoreA }, { score: scoreB }) => scoreB - scoreA)
    
  scoreSet.innerHTML = '';
  scoreSet.appendChild(scoreItem);
}

<div class="score-set">
  <div class="score-item">A
    <div id="score">96+</div>
  </div>
  <div class="score-item">B
    <div id="score">99</div>
  </div>
  <div class="score-item">C
    <div id="score">99</div>
  </div>
  <div class="score-item">D
    <div id="score">96-</div>
  </div>
</div>
<div class="score-set">
  <div class="score-item">A
    <div id="score">86</div>
  </div>
  <div class="score-item">B
    <div id="score">88</div>
  </div>
  <div class="score-item">C
    <div id="score">90</div>
  </div>
  <div class="score-item">D
    <div id="score">90+</div>
  </div>
</div>
<div class="score-set">
  <div class="score-item">A
    <div id="score">83-</div>
  </div>
  <div class="score-item">B
    <div id="score">83+</div>
  </div>
  <div class="score-item">C
    <div id="score">76</div>
  </div>
  <div class="score-item">D
    <div id="score">78</div>
  </div>
</div>