JSFiddle - React, Tailwind, and code Playground

by pradeep

HTML

<i><b>This <b><i>is <u>a</u> new</i>

</b>test</b>
</i>
<div>
<sup class="supertag"><sup><sup><sup>®</sup></sup></sup></sup>
</div>
<div>
<sup class="supertag"><sup><sup><sup>®</sup></sup></sup></sup>
</div>
<div>
  <sup class="supertag">®</sup>
</div>

<table class="table" id="objPermissionTableContent">
  <thead class="thead-light">
    <tr class="table-header">
      <th scope="col" class="border-top-0">
        <div class="form-group form-check mb-0">
          <input type="checkbox" class="form-check-input">
          <label class="form-check-label" for="objCreate">Create</label>
        </div>
      </th>
      <th scope="col" class="border-top-0">
        <div class="form-group form-check mb-0">
          <input type="checkbox" class="form-check-input">
          <label class="form-check-label" for="objUpdate">Update</label>
        </div>
      </th>
      <th scope="col" class="border-top-0">
        <div class="form-group form-check mb-0">
          <input type="checkbox" class="form-check-input">
          <label class="form-check-label" for="objRemove">Remove</label>
        </div>
      </th>
    </tr>
  </thead>
  <tbody class="disabled" id="objPermissionTable">
    <tr id="session">
      <td class="col-create" id="16">
        <div class="form-check"><input class="form-check-input" type="checkbox"></div>
      </td>
      <td class="col-update" id="17">
        <div class="form-check"><input class="form-check-input" type="checkbox"></div>
      </td>
      <td class="col-remove" id="18">
        <div class="form-check"><input class="form-check-input" type="checkbox" checked></div>
      </td>
    </tr>
    <tr id="scheduledmessage">
      <td class="col-create" id="265">
        <div class="form-check"><input class="form-check-input" type="checkbox"></div>
      </td>
      <td class="col-update" id="266">
        <div class="form-check"><input class="form-check-input" type="checkbox"></div>
      </td>
      <td class="col-remove" id="267">
     ...

JavaScript

/* $("sup").each(function () {
    if ($(this).parents(this.nodeName.toLowerCase()).length) $(this).contents().unwrap();
}); */
/* var checkedNum = $('#objPermissionTableContent tbody tr td').eq(col).find('input:checked').length;
var rowsNum = $('#objPermissionTableContent tbody tr').length;
if (checkedNum === rowsNum) {
  console.log(" check the header"); 
}*/



var wrap = document.querySelectorAll('.supertag > sup');

[].forEach.call(wrap, function(sup) {
sup.replaceWith(sup.textContent);
});