JSFiddle - React, Tailwind, and code Playground

by Tân Nguyễn

HTML

<main class="container---1Jq0g"><div class="tableOfContentsHeader---3dw8_"><div class="pathsList---3A3VS"><span class="text---3Xc7_">This course is part of:</span><ul class="table-of-contents__skill-paths"><li class="table-of-contents__skill-path"><a href="/paths/skills/photoshop-for-creative-professionals" class="table-of-contents__skill-path-link"><img class="table-of-contents__skill-path-link__icon" src="https://pluralsight2.imgix.net/paths/images/photoshop-e26c2b1bff.png" alt="">Photoshop for Creative Professionals Path</a></li></ul></div><button class="buttonLink---KymJM">Expand All</button></div><div data-css-d303pi=""><div data-css-1fq8nx6="" class="drawer---2bAtz"><div data-css-1oot5vc=""><div data-css-euzj8=""><div data-css-prsp0g=""><div data-css-uunkbn="" style="flex: 0 1 32px;"><a href="/player?course=photoshop-cc-camera-raw&amp;author=matthew-pizzi&amp;name=photoshop-cc-camera-raw-m1&amp;clip=0&amp;mode=live" class="playerLink---v3rwY" target="psplayer"><span class="defaultStyle---3Kp1I playIcon---12u6Q playIconActive---1G13J"><svg viewBox="0 0 512 512" role="img" aria-label="Play module Course Introduction"><title>Play module Course Introduction</title><g class="defaultFill---3BX80 playIconActiveFill---24JYi"><path d="M255.5,512c-141.2,0-256-114.8-256-256S114.3,0,255.5,0s256,114.8,256,256S396.7,512,255.5,512z M255.5,24.4
C127.8,24.4,23.9,128.3,23.9,256s103.9,231.6,231.6,231.6c127.7,0,231.6-103.9,231.6-231.6S383.2,24.4,255.5,24.4z M194.5,134.1
v243.8L365.2,256L194.5,134.1z"></path></g></svg></span></a></div><div data-css-uunkbn="" class="tableCellPlayerLink---1t8I0" style="flex: 1 1 auto;"><h3 class="table-of-contents__title"><a href="/player?course=photoshop-cc-camera-raw&amp;author=matthew-pizzi&amp;name=photoshop-cc-camera-raw-m1&amp;clip=0&amp;mode=live" class="" target="psplayer">Course Introduction</a></h3></div><div data-css-10awx8b="" style="flex: 0 1 40px;"><span><div data-css-1s05snf=""><svg role="img" aria-label="check icon" viewBox="0 0...

JavaScript

var arr = [];

$('.table-of-contents__title a').each(function (index, x) {
   var title = {title:x.innerText,subtitle:[]};

   $(this).closest('.drawer---2bAtz').find('.clipListTitle---hbKca').each((a, b) => {

   title.subtitle.push(b.innerHTML)
   });
   
   arr.push(title)
});

$('body').empty()

for (var item of arr) {
	var x = $(`
  	<div>
    		<a class="text-dark text-decoration-none" href="javascript:;">${item.title}</a>
    <div>
  `).appendTo('body');
  
  var list = $(`<div class="ml-4 p-3 bg-secondary">`).appendTo(x);
  
  for (var subtitle of item.subtitle) {
  	$(`
    	<div>
	    	<a class="text-white" data-name="${subtitle.replace(/:/g, ' -').replace(/\?/g, '')}" href="#">${subtitle}</a>
			</div>
    `).appendTo(list);
  }
}

console.log($('body').html());