JSFiddle - React, Tailwind, and code Playground

JavaScript

/*const tags = ["a","abbr","acronym","address","applet","area","article","aside","audio","b","base","basefont","bb","bdo","big","blockquote","body","br","button","canvas","caption","center","cite","code","col","colgroup","command","datagrid","datalist","dd","del","details","dfn","dialog","dir","div","dl","dt","em","embed","eventsource","fieldset","figcaption","figure","font","footer","form","frame","frameset","h1 to h6","head","header","hgroup","hr","html","i","iframe","img","input","ins","isindex","kbd","keygen","label","legend","li","link","map","mark","menu","meta","meter","nav","noframes","noscript","object","ol","optgroup","option","output","p","param","pre","progress","q","rp","rt","ruby","s","samp","script","section","select","small","source","span","strike","strong","style","sub","sup","table","tbody","td","textarea","tfoot","th","thead","time","title","tr","track","tt","u","ul","var","video","wbr"];


let mix = "<div><p>X</p><p>Y</p></div>".repeat(~~(Math.random() * 10));
let html = `${mix}<div><p>1</p></div>${mix}<div><p>2</p>,<p>3</p>,<p>4</p></div>${mix}<div><p>5</p></div>${mix}`;



let t;
while (t = tags.pop()) {
  try {
    let el = document.createElement(t);
		el.innerHTML = html;
		el = el.content;
    console.log('testing', t, '...', el)
    if (el) {
      console.log('Tag passed:', t, el)
    }
  
  } catch(ex) {
  
  }
}
*/

class JobSeeker {

  modifyHtmlFragment(color, html) {
		let el = document.createElement('name');
		el.innerHTML = html;
		el = el.content;

		let p = el.querySelector('value1');
		p.parentNode.insertBefore(p, p.previousElementSibling);
		p.parentNode.style.backgroundColor = color;

		p = el.querySelector('value1');
		p.textContent = '6';

		el.querySelectorAll('value1').forEach(el => el.parentElement.remove());

		return el;
	}

	
}



let mix = "<div><p>X</p><p>Y</p></div>".repeat(~~(Math.random() * 10));

console.log(
	new...