JSFiddle - React, Tailwind, and code Playground

HTML

<p id="p">This is <i id="text">text</i> and more text</p>






<br><br><br><br><br><br><br><br><br>




<p>This is <i id="text"><b>html</b></i> and more <b>html</b></p> (should look like this)

JavaScript

function rep() {
var t = $('#p').text().replace('text', '<b>html</b>'); 
$('#p').html(t);
}

setTimeout(rep, 1100);
setTimeout(rep, 3000);

//HOW DO I KEEP THEM BOTH BOLD?