wrap span tag around slected text. Firefox / Chrome behavior on doubleclick

Question

I want to replace the depriciated document.execCommand.
I select a word with doubleclick and then i click the button "text-danger" to change the color to red. Making this again, the color shoud be removed. It works fine in MS-Edge-Chrome. But Firefox always wraps the a new span around it. this is because i cannot get tag name of the selected word. Selecting the word by moving the mouse it will also work in FF. How can Firefox give me the tag name of the selected word - selected by doubleclick?

$(document).ready(function() {

  $(".classWrapper").on("click", function() {
    let classes = "";
    let result = "";
    let ranges = [];
    sel = document.getSelection();
    for (let i = 0; i < sel.rangeCount; i++) {
      ranges[i] = sel.getRangeAt(i);
    };
    var range = sel.getRangeAt(0);

    if (range > "") {
      let param = $(this).attr("data-param");
      //let sel = document.getSelection(); // Kurzform
      let tagName = sel.anchorNode.parentNode.tagName;
      classNames = (sel.anchorNode.parentNode.getAttribute("class"));


      result = "classes=" + classNames + "; param=" + param;
      result = result + "\n\nThis ist the result:\n";

      console.log("Range: " + range);
      console.log(sel.anchorNode.parentNode.className);
      console.log('TagName= ' + tagName);
     
     // REM i want to remove the class by clicking again (works in Chrome but not in FF)
      if (tagName == "SPAN") {
        if (classNames.indexOf(param) >= 0) {
          sel.anchorNode.parentNode.classList.remove(param);
        } else {
        sel.anchorNode.parentNode.classList.remove("text-danger");
        sel.anchorNode.parentNode.classList.remove("text-success");
        sel.anchorNode.parentNode.classList.add(param);
        };


      } else {

        if (window.getSelection) {
          span = document.createElement("span");

          span.setAttribute("class", param);

          var selectedText = window.getSelection();
          if (selectedText.rangeCount) {
            var range = selectedText.getRangeAt(0).cloneRange();

            range.surroundContents(span);
            selectedText.addRange(range);
            selectedText.removeAllRanges();
          }
        }
      }
    } else {
      alert("nichts ausgewählt")
    };
    console.log(result);
    $("#info").html(result + "\n" + $("#dbContent").html());
  });
})

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<div class="container">

  <button class="btn btn-success classWrapper" data-param="text-success">text-success</button>
  <button class="btn btn-success classWrapper" data-param="text-danger">text-danger</button>
  <button class="btn btn-success classWrapper" data-param="bg-success">bg-success</button>
   

  <div id="dbContent" style="min-height:50px; padding:5px; width:100%;background:beige;" contenteditable="true">Doubleclick a word and assign a color or background. Repeat it. The color should have removed. Lorem ipsum onsectetur adipisicing elit, sed do eiusmod </div>
  <textarea id="info" style="width:100%;height:150px;"></textarea>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>