JSFiddle - React, Tailwind, and code Playground

by _kdts

HTML

<h2>Gedanken zum heutigen Kader und Unterschiede zum Kader von 2014</h2>
<p>
Noch ist nicht ganz absehbar mit welcher <span class="fnote" data-note="Die Aufstellung">Formation</span> und Spielern der Titelverteidiger im Moskauer Luschniki-Stadion starten wird gegen den Weltranglisten-15. aus Mittelamerika, sicher ist jedoch zweierlei: Erstens wird Mario Götze, 2014 noch gefeierter Final-Held im <span class="fnote" data-note="Das Maracanã-Stadion steht in Brasilien">Maracanã-Stadion</span>, nicht mitwirken und Julian Draxler vom <span class="fnote" data-note="Stand 20.03.2018" data-mark="stand">französischen</span> Meister sowie Pokalsieger Paris Saint-Germain wird in der ersten Elf stehen. Auch dürfte Manuel Neuer nach dem Einsatz im letzten Testspiel gegen Saudi-Arabien, dass nur überraschend knapp mit 2:1 gewonnen wurde, zwischen den Pfosten stehen und sein 14. <span class="fnote" data-note="Die Weltmeisterschaft [hsdaf](http://google.de) und [test2](http://youtube.de)">WM-Spiel</span> (insgesamt das 77. Spiel) für die Nationalmannschaft bestreiten. 
</p>





<p>
Noch ist nicht ganz absehbar mit welcher <span class="fnote" data-note="Die Aufstellung">Formation</span> und Spielern der Titelverteidiger im Moskauer Luschniki-Stadion starten wird gegen den Weltranglisten-15. aus Mittelamerika, sicher ist jedoch zweierlei: Erstens wird Mario Götze, 2014 noch gefeierter Final-Held im <span class="fnote" data-note="Das Maracanã-Stadion steht in Brasilien">Maracanã-Stadion</span>, nicht mitwirken und Julian Draxler vom französischen Meister sowie Pokalsieger Paris Saint-Germain wird in der ersten Elf stehen. Auch dürfte Manuel Neuer nach dem Einsatz im letzten Testspiel gegen Saudi-Arabien, dass nur überraschend knapp mit 2:1 <span class="fnote-mark" data-mark="stand">gewonnen</span> wurde, zwischen den Pfosten stehen und sein 14. <span class="fnote" data-note="Die Weltmeisterschaft">WM-Spiel</span> (insgesamt das 77. Spiel) für die Nationalmannschaft bestreiten....

CSS

.footnotes{
	margin-top: 35px;
	font-size: 0.875rem;
}

.footnotes hr{
	margin-bottom: 15px;
	width: 20%;
	border-top: 1px solid #ccc;
}

.footnotes p{
	margin: 0 auto 4px 5px;
	padding: 0;
}

.fnote-sup-number{
	font-weight: bold;
	padding-left: 2px;
	padding-right: 3px;
	cursor: pointer;
}

JavaScript

//var numberOfFootnotes = $('.fnote').length;
var $footnoteSrouce = $('.footnotes');

$footnoteSrouce.append('<hr align="left" />')

$('.fnote').each(function(index){
	
	$(this).append('<sup class="fnote-sup-number">'+(index+1)+'</sup>')
    
    //data-mark
    var hasMark = $(this).data('mark');
    if(hasMark !== undefined && hasMark.trim() != ''){
    	$('.fnote-mark[data-mark="'+hasMark+'"]').append('<sup class="fnote-sup-number">'+(index+1)+'</sup>')
    }

    var fnoteText = $(this).data('note'),
    	re = /\[(.*?)\]\((.*?)\)/,
    	matchResult;

    while ((matchResult = re.exec(fnoteText)) !== null) {
    	fnoteText = fnoteText.replace(matchResult[0], '<a href="'+matchResult[2]+'" target="_blank" rel="nofollow">'+matchResult[1]+'</a>')
    	console.log('#1')
    }
	$footnoteSrouce.append('<p>'+(index+1)+'. ' +fnoteText+'</p>')

})

$("body").on( "click", "sup.fnote-sup-number", function() {
	if ($footnoteSrouce.length) {
		$('html,body').animate({ scrollTop: $footnoteSrouce.offset().top -50 }, 500);
		return false;
	}
});