Citations and references

HTML

<div class="container-academicpaper-body">
  Some text .<sup>1,2</sup> more text.<sup>3-5</sup> more text. <sup>4</sup>
</div>
<div class="container-references">
  <p>
    1. Cancer Research Funding. 2012
  </p>
  <p>
    2. Andre F, Zielinski CC. vi46-vi51.
  </p>
  <p>
    3. Gradishar WJ. Taxanes 2012;6:159-171.
  </p>
  <p>
    4. Joensuu H, Gligorov J. Ann Oncol. 2012;Suppl 6:vi40-45.
  </p>
  <p>
    5. Mita AC,2012;18(24):OF1-OF
  </p>
</div>

<hr>


<div class="container-academicpaper-body">
  Some text .<sup>1</sup> more text.<sup>1-3</sup> more text.
</div>
<div class="container-references">
  <p>
    1. White house 2019
  </p>
  <p>
    2. Toms Hardware 2010
  </p>
  <p>
    3. Science Daily 2007
  </p>
</div>

JavaScript

//prepare HTML (add identifiers for all references)
var allReferencesOnPage = $(".container-references p").each(assignReferenceNumberToReference);

//prepare HTML (link up the citations with the references)
$('.container-academicpaper-body sup').each(linkCitationToReference);

//on hover event on citations
$('[data-referenceidtoshow]').mouseover(mouseOverCitationFunction);

function mouseOverCitationFunction() {
  var referencePlaceholderElem = $(this);
  var referencesNumbersToShow = referencePlaceholderElem.attr('data-referenceidtoshow').split(' ');
  var referenceBoxToLookIn = referencePlaceholderElem.parent('.container-academicpaper-body').next('.container-references');
  var referenceTextToShow = referencesNumbersToShow.map(function(referenceNumber) {
    return $('[data-reference-id="' + referenceNumber + '"]', referenceBoxToLookIn).text();
  });

  if (referenceTextToShow.length > 0) {
    alert(referenceTextToShow.join("\n"));
  }
}

function assignReferenceNumberToReference() {
  var referenceElem = $(this);
  var match = referenceElem.text().trim().match("^([0-9]+)\.");
  if (match) {
    referenceElem.attr('data-reference-id', match[1]);
  }
}

function linkCitationToReference() {
  var referencePlaceholderElem = $(this);
  var supContents = referencePlaceholderElem.html().trim();
  var isRangeReference = /^([0-9]+)\-([0-9]+)$/.test(supContents); //1-3
  var isMultiCommaReference = /^(([0-9]+)(,?)){2,}$/.test(supContents); //1,3,5
  var isSingleReferencePlaceholder = /^[0-9]+$/.test(supContents); //11

  if (!isRangeReference && !isMultiCommaReference && !isSingleReferencePlaceholder)
    return;

  //decide what references to show by number
  var referenceNumbers = [];
  if (isSingleReferencePlaceholder) { //reference style 3
    referenceNumbers = [supContents];
  } else if (isRangeReference) { //reference style 3-5
    var referenceNumberRange = supContents.split("-");
    for (var j = referenceNumberRange[0]; j <=...