highlight the words using LCS algorithm

Question

I am learning HTML, CSS, Javascript. In this problem, I am trying to underline the words that are different between the variables X & Y (see below code). Some how I am not able to visualize the underlines. Could someone help?

I have attached my code here. Any help is greatly appreciated. The corresponding HTML and CSS code will be provided on request.

const leftText = document.getElementById("text-input");
const gearButton = document.querySelector("#gear-button");

gearButton.addEventListener("click", function() {
  let X = leftText.value;                      
  let Y = "Die Deutsche Sprache";                          
  displayDifferences(X, Y)
});

// The LCS (Longest Common Subsequence) Algorithm
function lcs(a, b) {
  return lcs;
}


// Function to display the differences
function displayDifferences(left, right) {
  const leftParagraphs = left.split("\n");
  const rightParagraphs = right.split("\n");

  leftParagraphs.forEach((leftParagraph, index) => {
    const rightParagraph = rightParagraphs[index];
    const leftWords = leftParagraph.split(" ");
    const rightWords = rightParagraph.split(" ");
    const common = lcs(leftWords, rightWords);
    let leftIndex = 0;
    let rightIndex = 0;
    for (let i = 0; i < common.length; i++) {
      while (leftWords[leftIndex] !== common[i]) {
        leftText.innerHTML += `<span class="underlined">${leftWords[leftIndex]} </span>`;
        leftIndex++;
      }
      while (rightWords[rightIndex] !== common[i]) {
        rightIndex++;
      }
      leftText.innerHTML += `<span class="unchanged">${leftWords[leftIndex]} </span>`;
      leftIndex++;
      rightIndex++;
    }
    while (leftIndex < leftWords.length) {
      leftText.innerHTML += `<span class="underlined">${leftWords[leftIndex]} </span>`;
      leftIndex++;
    }
    while (rightIndex < rightWords.length) {
      rightIndex++;
    }
    leftText.innerHTML += "<br />";
  });
}