JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col-6">
      <h2>Classe A</h2>
      <ol id="a"></ol>
    </div>
    <div class="col-6">
      <h2>Classe B</h2>
      <ol id="b"></ol>
    </div>
  </div>
</div>

JavaScript

var classeA = [{
	noms: "marc", moyenne: 15
}, {
	noms: "marion", moyenne: 8
}, {
	noms: "antoine", moyenne: 4
}];

var classeB = [{
	noms: "Louis", moyenne: 11
}, {
	noms: "Yannis", moyenne: 14
}, {
	noms: "Olivier", moyenne: 18
}, {
	noms: "Quentin", moyenne: 12
}];

function quiàlamoyenne (eleves, classe) {
	for (i = (eleves.length - 1); i >= 0; i--) {
  	var eleve = eleves[i], note = eleve.moyenne;
    if (note >= 10) {
    	var html = '<li>' + eleve.noms + " à la moyenne avec " + note + '</li>';
    	document.querySelector('#' + classe).innerHTML += html;
    }
  }
}
quiàlamoyenne(classeA, 'a');
quiàlamoyenne(classeB, 'b');