Caret not shown in empty iframe

I am trying to implement my own rich text editor using iframe. However, whenver I click inside the empty rich text editor, the caret or mouse cursor doesn't show up. After checking on google, I found that we need to add some html to the iframe beforehand such as 'break tag. But my code below will only add the break tag to the first rich text editor and not to the second. Not sure what I am doing wrong here....... $.fn.createRichTextEditor = function(width,height="auto") { var iframeDocument; var iframeDocumentId = this.attr("id") + "-rte-editor"; var newHtml = "<div id='rte-" + iframeDocumentId + "' class='rte'>" + "<ul class='rte-toolbar'>" + "<li id='bold'><button id='rte-boldBtn-" + iframeDocumentId + "' class='rte-button' value='bold' title='Bold'></button></li>" + "<li id='italic'><button id='rte-italicBtn-" + iframeDocumentId + "' class='rte-button' value='italic' title='Italic'></button></li>" + "<li id='underline'><button id='rte-underlineBtn-" + iframeDocumentId + "' class='rte-button' value='underline' title='Underline'></button></li>" + "<li id='createLink'><button id='rte-createLinkBtn-" + iframeDocumentId + "' class='rte-button-link' value='createLink' title='Link'></button></li>" + "<li id='unlink'><button id='rte-unlinkBtn-" + iframeDocumentId + "' class='rte-button-link' value='unlink' title='Unlink'></button></li>" + "</ul>" + "<iframe class='rte-iframe' id='" + iframeDocumentId + "' frameBorder='0'></iframe>" + "</div>"; this.after(newHtml); this.css('display', 'none'); var iframe = document.getElementById(iframeDocumentId); var rte = iframe.parentElement; $(rte).css('width', width); $(rte).css('border', '1px solid #ccc'); $(iframe).on('load', function() { $(iframe).width("100%"); $(iframe).height(height); iframeDocument = iframe.contentDocument; iframeDocument.designMode = 'On'; $(iframeDocument).find('body').html('<br><br/>'); }); };