JSFiddle - React, Tailwind, and code Playground

by slawe

HTML

<div id="accordion">
              <div>
                <div>
                  <div><img src="./Luxury Spa Treatments, Essex   Greenwoods Hotel &amp; Spa_files/Massage1.jpg" alt="">
                  </div>
                  <div>
                    <h4>Deep Tissue Back Massage <br> 20 minutes</h4>
                    <p>Minimum time, maximum tension-relieving results. Specifically targets the back, shoulders and neck areas, where you need it most.</p>
                    <div>£42</div>
                  </div>
                </div>
                <div>
                  <div><img src="./Luxury Spa Treatments, Essex   Greenwoods Hotel &amp; Spa_files/Massage6.jpg" alt=""></div>
                  <div>
                    <h4>Deep Tissue Muscle Massage <br> 50 minutes</h4>
                    <p>Deep rhythmic pressure massage. Alleviate stress, ease muscles and revive the senses with this powerful customized massage. Dynamic blends of  essential oils are prescribed to target individual needs and reduce specific stress and muscle tension.</p>
                    <ul>
                      <div class="father">Stress-a-way: wind down and release the tension of the day</div>
                      <div class="father">Spirit Reviver: A Powerful surge to invigorate and recharge.</div>
                      <div class="father">Muscle Melt: Relax and re-energise a tired and aching body.</div>
                      <div class="father">Chakra Balancing: Reconnect you mind, body and soul</div>
                    </ul>
                    <div>£70</div>
                  </div>
                </div>
                <div>
                  <div><img src="./Luxury Spa Treatments, Essex   Greenwoods Hotel &amp; Spa_files/Massage7.jpg" alt=""></div>
                  <div>
                    <h4>Aroma Stone Therapy <br> 65 minutes</h4>
                    <p>Warm Basalt stones to melt away tension. Therapeutic heat is slowly released into the belly of the muscle for a...

JavaScript

var childNodes = document.getElementsByTagName('div')[0].childNodes;
for (var i = 0; i < childNodes.length; i++) {
    console.log(childNodes[i].nodeType);
    if (childNodes[i].nodeType !== 3) {
      childNodes[i].className = "jebeni_tata";
    }        
}

var accordion = $('.jebeni_tata');

var titlovi = [
    'Massage',
    'Elemis Advanced Anti-Aging Facials',
    'Elemis skin solution',
    'Skin Specific Facials',
    'Voya Facials',
    'Elemis Body Treatments',
    'Voya Body Treatments',
    'Body Exfoliation',
    'Jessica',
    'Waxing',
    'Tinting',
    'Pregnancy',
    'Alternative therapies',
    'Men Treatments'];


accordion.wrapAll('<ul/>').each(function(i){
  $(this).wrap('<li/>').parent().prepend('<a href="#">'+titlovi[i]+'</a>');
});