JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https//cdn.ckeditor.com/4.5.2/standard-all/ckeditor.js"></script>
<div>
    <p> This is the the paragraph with out any other tag. </p>
    <p> This is the the paragraph with a link tag <a href="#">link</a> </p>
    <p> This is the the paragraph with a bold tag <b>bold</b> </p>
</div>

JavaScript

$(document).ready(function(e){
		$(document).click(function(event){
			console.log("clicked: " + event.currentTarget);
		  // event.target is the clicked object
		  	var view = $(event.target);

		  	
			var uniqueIdforCurrentElement =  randomString(32).trim();
			if(view.attr('id') === undefined || view.attr('id') === ''){
				view.attr('id', uniqueIdforCurrentElement);
			} else {
				uniqueIdforCurrentElement = view.attr('id');
			}
			var editor = CKEDITOR.instances[uniqueIdforCurrentElement];
			// console.log(uniqueIdforCurrentElement, editor);
			if (editor) {
				editor.destroy(true);
			} 
			view.attr('contenteditable', true);
			CKEDITOR.disableAutoInline = true;
			CKEDITOR.inline(view.get(0));
		});
	});

function randomString(len){
     var text = " ";
     var charset = "abcdefghijklmnopqrstuvwxyz0123456789";
     for( var i=0; i < len; i++ )
     	text += charset.charAt(Math.floor(Math.random() * charset.length));
     return text;
 }