JSFiddle - React, Tailwind, and code Playground

HTML

<select id="annee">
 <option value='-1'> sélectionnez l'année...</option>
 
 </select>
 <div class="col-lg-2 pt-5"><h2>Archives</h2>                          
  <ul id="archive" class="list-group list-group-horizontal mx-auto">
  <li class="list-group-item list-group-item-action list-group-item-light " data-year="2022" ><a href="#" class="">2022</a></li>
  <li class="list-group-item list-group-item-action list-group-item-light " data-year="2021"><a href="#" class="">2021</a></li>
  <li class="list-group-item list-group-item-action list-group-item-light " data-year="2020"><a href="#" class="">2020</a></li>
  <li class="list-group-item list-group-item-action list-group-item-light " data-year="2019"><a href="#" class="">2019</a></li>
  </ul></div>

JavaScript

$(function(){

for (i=0; i<4;i++){
$opt=$('<option/>');
y="20"+ (19+i);
$opt.val(y).html(y);
console.log($opt);
$("#annee").append($opt);
}

$('#annee').on('click', function(){
	annee= $(this).val();
  $("li").hide();
  $("li[data-year='"+annee+"']").show();
});


 $("li").hide();
});