JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="agences" >
    <li data-agence="Paris">Paris</li>
    <li data-agence="Lille">Lille</li>
    <li data-agence="Douai">Douai</li>
<div id="tel_agence"></div>
<div id="fax_agence"></div>

JavaScript

var monJSON= {"Paris": {"tel":"tel paris",
               "fax":"fax Paris",
               "mail": "mail Paris",
               "adr":"Adr PAris",
                "hor":" Horaires Paris....."},    
"Lille": {"tel":"tel Lille",
               "fax":"fax Lille",
               "mail": "mail Lille",
               "adr":"Adr Lille",
                "hor":" Horaires Lille"},     
"Douai": {"tel":"tel Douai",
               "fax":"fax Douais",
               "mail": "mail Douais",
               "adr":"Adr Douais",
                "hor":" Horiares Douais"}
             }

$( function(){
    
    $('#agences li').on ('mouseenter', function(){
        survol=$(this).data('agence');
        $('#tel_agence').html(monJSON[survol].tel);
        $('#fax_agence').html(monJSON[survol].tel);

    })
  
})