JSFiddle - React, Tailwind, and code Playground

by Mohammed Fellak

HTML

<img src="https://ashleyfurniture.scene7.com/is/image/AshleyFurniture/46005-16-56-10X8-CROP?$AFHS-Grid-1X$" width="200px" alt="title" />
<h3 id="title" style="text-decoration:underline;">
	Ashlor Nuvella® 2-Piece Sectional with Chaise
</h3>
<p>⭐⭐⭐⭐⭐</p>
<h3>
	$1,017.99
</h3>

<button onclick="supCharacter()">
    Apply Change on ®
</button>

<button class="reload" onclick="document.location.reload()">
    Reload Page
</button>

CSS

* {
    font-family: arial;
}

button {
    background: #f30;
    color: white;
    padding: 0.5rem 1rem;
    border: 1px solid #f50;
    border-radius: 5px;
    margin-top: 1rem;
}

.reload {
    background: none;
    color: #f30;
}

JavaScript

var pdict = {
	ProductTitle: 'Ashlor Nuvella® 2-Piece Sectional with Chaise'
}


function supCharacter() {
  var ccc = pdict.ProductTitle.replace(/\®/gi, '<sup>®</sup>')
  document.getElementById("title").innerHTML = ccc;
}