JSFiddle - React, Tailwind, and code Playground

HTML

<div id="texte">
    <p>PARIS (AFP) - Les prix à la consommation en France ont encore grimpé de 0,4% en décembre par rapport au mois précédent, pour atteindre 2,5% sur un an (+2,4% hors tabac), a annoncé jeudi l'<a href="#" class="footnote" data-note="l'Institut national de la statistique et des études économiques">Insee</a>.</p>

    <p>Théoriquement, ce taux d'<a href="#" class="footnote" data-note="L'inflation est une baisse durable de la valeur de la monnaie">inflation</a> devrait faire monter le taux du Livret A de 2,25% à 2,50%, voire 2,75% au 1er février.</p>

    <p>Mais le gouverneur de la Banque de France (BdF) Christian Noyer a déjà préparé les esprits à son éventuel maintien en l'état, expliquant que l'inflation devrait baisser dans les prochains mois et qu'il serait donc inutile de relever le rendement du <a href="#" class="footnote" data-note="Le livret A est le compte d'épargne réglementé et défiscalisé français le plus utilisé">Livret A</a> pour le diminuer dans la foulée.</p>
<div>

CSS

a.footnote, a.footnote:visited {
    color:black;
    text-decoration:none;
    border-bottom:1px dashed blue;
}
a.footnote:hover {
    cursor:pointer;
}
#notes {
    width:100%;
    background-color:#EAEAEA;
}

JavaScript

var $this = $('#texte');
var $footnotes = $('a.footnote', $this);
 
if ($footnotes.length > 0) {
    var notes = 'notes';
 
    // creating the notes div
    $('<div>', {
        'id': notes,
        'class': 'footnotes'
    }).appendTo($this);
 
    // creating le list
    $('<ol>').appendTo('#' + notes);
 
    // for each note
    $('a.footnote', $this).each(function(i) {
        i++;
        $(this).attr('href', '#' + notes).after(' <sup>' + i + '</sup>');
 
        // inserting the note into the list
        $('<li>', {
            html: $(this).data('note')
        }).appendTo('#' + notes + ' ol');
    });
}