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">

   </ul>
 </div>

JavaScript

$(function(){

for (i=0; i<50;i++){

$opt=$('<option/>');
y="20"+ (10+i);
$opt.val(y).html(y);
$("#annee").append($opt);

$li=$('<li/>');
$li.addClass("list-group-item list-group-item-action list-group-item-light");
$li.attr('data-year', y);
$a=$("<a/>");  
$a.attr('href',"#")
  .html(y);
$li.append($a);
$("#archive").append($li);
}

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


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