JSFiddle - React, Tailwind, and code Playground

HTML

<div id='placeholder'>S00:00:09.78-S_dT48gnDyIgS00:10:00.78-S_dT48gnDyIgS00:20:00.22-S_dT48gnDyIg-00:00:09.78-S_dT48gnDyIg-00:10:00.78-S_dT48gnDyIg-00:20:00.22-S_dT48gnDyIgE
</div>
<button id="aa">AA</button>
<div id='ZZZ'></div>

CSS

#ZZZ { border: solid 1px red }

JavaScript

var placeholder = $('#placeholder');

$('#aa').on('click', function(){
  placeholdertohtml(placeholder);  
});

function placeholdertohtml(placeholder){
  var numberOfPairs = placeholder.text().match(/(([A-Z-]{1}\d{2}\:\d{2}\:\d{2}\.\d{2}[A-Z-]{1})([a-zA-Z0-9_\-]{11}))/g);
 var countdown = numberOfPairs.length;
  var number = placeholder.text();
    var sss = numberOfPairs.join(',').split(',');
       var elements = [];
    
 $.each(sss,function(i){

  // var oo = number.substring(8 * i + 1, (8 * i) + 9).split(':');   
   var oo = this.substr(1,8).split(':'); // HH:MM:SS

var ooh = oo[0];
var oom = oo[1];
var oos = oo[2];
      
   //   var ooms = number.substring(2 * i + 10, (2 * i) + 12);
 var ooms = this.substr(10,2);	// Keep at 2 for proper display of 100th sec

// var startendpref = number.substring(1 * i + 0, (1 * i) + 1);
    var startendpref = this.substr(0,1);
// var startendsuff = number.substring(1 * i + 12, (1 * i) + 13);
 var startendsuff = this.substr(12,1);
// var videoid = number.substring(11 * i + 13, (11 * i) + 24);
 var videoid = this.substr(13,11);

if ( startendpref.indexOf('S') != -1 ) {
var seprefclass = "vtime-timelink time-active time-start"; 
} else if ( startendpref.indexOf('E') != -1 ) {
var seprefclass = "vtime-timelink end-active time-end"; 
} else if ( startendpref.indexOf('-') != -1 ) {
var seprefclass = "vtime-timelink"; 
} else { // If any other alphanum or symbol other than "S", "E", and "-"
var startendpref = '-';
var seprefclass = "vtime-timelink";
}
if ( startendsuff.indexOf('S') != -1 ) {
var sesuffclass = "vtime-framelink frame-active frame-start"; 
} else if ( startendsuff.indexOf('E') != -1 ) {
var sesuffclass = "vtime-framelink frame-end"; 
} else if ( startendsuff.indexOf('-') != -1 ) {
var sesuffclass = "vtime-framelink"; 
} else {
var startendsuff = '-'; // If any other alphanum or symbol other than "S", "E", and "-"
var sesuffclass = "vtime-framelink"; 
}
 
    elements.push('<p...