JSFiddle - React, Tailwind, and code Playground

by lbstr

HTML

<div id="r"></div>

JavaScript

var notes = [];
notes.push({num:5, note: '<p class="MOD_footnote"><a>5</a>Bla bla bla</p>'});
notes.push({num:1, note: '<p class="MOD_footnote"><a>1</a>Bla bla bla</p>'});
notes.push({num:2, note: '<p class="MOD_footnote"><a>2</a>Bla bla bla</p>'});
notes.push({num:7, note: '<p class="MOD_footnote"><a>7</a>Bla bla bla</p>'});
notes.push({num:12, note: '<p class="MOD_footnote"><a>12</a>Bla bla bla</p>'});
notes.push({num:4, note: '<p class="MOD_footnote"><a>4</a>Bla bla bla</p>'});
notes.push({num:5, note: '<p class="MOD_footnote"><a>5</a>Bla bla bla</p>'});
notes.push({num:2, note: '<p class="MOD_footnote"><a>2</a>Bla bla bla</p>'});
notes.push({num:6, note: '<p class="MOD_footnote"><a>6</a>Bla bla bla</p>'});

notes.sort(function(a, b){
    if(a.num > b.num) { return 1; }    
    if(a.num < b.num) { return -1; }
    return 0;
});

var html = [],
    notesLen = notes.length,
    note, noteHtml, isUnique;
for (var i = 0; i < notesLen; i++) {
    note = notes[i];
    noteHtml = note.note;

    // Check if the same note already exists
    isUnique = true;
    for (var j = 0; j < html.length; j++) {
        if (html[j] === noteHtml) {
            isUnique = false;
            break;
        }
    }
    if (isUnique) {
        html.push(noteHtml);
    }
}

$('#r').html(html.join(''));