Element sort in javascript

I want to sort elements in a page using javascript.
In the page we have elements that are repeating but the content is differen (Just the inner text) in kg-toggle-heading-text and kg-toggle-content. We would like to sort element blocks that have class kg-card kg-toggle-card by the content of kg-toggle-heading-text alphabetically options to sor differently are not needed. The site is made on ghost.io platform and doesnt support sorting out of the box so i need to add the sorting via HTML embed.
Could this be done.

snippet of code

<div class="single-content gh-content kg-canvas">
   <div class="kg-card kg-toggle-card" data-kg-toggle-state="close">
      <div class="kg-toggle-heading">
         <h4 class="kg-toggle-heading-text">Klēpjdators</h4>
         <button class="kg-toggle-card-icon">
            <svg id="Regular" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
               <path class="cls-1" d="M23.25,7.311,12.53,18.03a.749.749,0,0,1-1.06,0L.75,7.311"/>
            </svg>
         </button>
      </div>
      <div class="kg-toggle-content">
         <p>ir mazs līdznēsājams <a href="https://lv.wikipedia.org/wiki/Person%C4%81lais_dators">personālais dators</a>, kas parasti sver 1-6 kilogramus, atkarībā no izmēra, materiāliem un citiem faktoriem.</p>
         <br>
      </div>
   </div>
   <div class="kg-card kg-toggle-card" data-kg-toggle-state="close">
      <div class="kg-toggle-heading">
         <h4 class="kg-toggle-heading-text">Personālais dators</h4>
         <button class="kg-toggle-card-icon">
            <svg id="Regular" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
               <path class="cls-1" d="M23.25,7.311,12.53,18.03a.749.749,0,0,1-1.06,0L.75,7.311"/>
            </svg>
         </button>
      </div>
      <div class="kg-toggle-content">
         <p>ir jebkurš dators, kura cena, izmērs un veiktspēja ir pielāgota individuālai lietošanai un ir paredzēta speciāli gala patērētājam, kurš ar šo iekārtu var darboties patstāvīgi un neatkarīgi.</p>
      </div>
   </div>
   <div class="kg-card kg-toggle-card" data-kg-toggle-state="close">
      <div class="kg-toggle-heading">
         <h4 class="kg-toggle-heading-text">Klaviatūra</h4>
         <button class="kg-toggle-card-icon">
            <svg id="Regular" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
               <path class="cls-1" d="M23.25,7.311,12.53,18.03a.749.749,0,0,1-1.06,0L.75,7.311"/>
            </svg>
         </button>
      </div>
      <div class="kg-toggle-content">
         <p>jeb <b>datora klaviatūra</b> ir datora ievades iekārta. Standarta datora tastatūrai ir 101 vai 104 taustiņi. Datora tastatūrai (ierasti <a href="https://lv.wikipedia.org/wiki/QWERTY">QWERTY</a> tipa) ir vairāk kā simt taustiņu, turklāt taustiņu nozīme nav pastāvīga.</p>
      </div>
   </div>
   <div class="kg-card kg-toggle-card" data-kg-toggle-state="close">
      <div class="kg-toggle-heading">
         <h4 class="kg-toggle-heading-text">Datorpele</h4>
         <button class="kg-toggle-card-icon">
            <svg id="Regular" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
               <path class="cls-1" d="M23.25,7.311,12.53,18.03a.749.749,0,0,1-1.06,0L.75,7.311"/>
            </svg>
         </button>
      </div>
      <div class="kg-toggle-content">
         <p>ir <a href="https://lv.wikipedia.org/wiki/Ier%C4%ABce">ierīce</a> kursora pārvietošanai pa datora ekrānu. Tās funkcijas ir atkarīgas no konkrētās programmas, ar kuru strādā <a href="https://lv.wikipedia.org/w/index.php?title=Lietot%C4%81js&amp;action=edit&amp;redlink=1">lietotājs</a>. Lielākajā daļā programmu peles pārvietošana izraisa noteiktas formas veidojuma (<a href="https://lv.wikipedia.org/wiki/Kursors">kursora</a>) — pārvietošanos pa ekrānu.</p>
      </div>
   </div>
   <figure class="kg-card kg-bookmark-card">
      <a class="kg-bookmark-container" href="https://dainas-saite.ghost.io/glosarijs/">
         <div class="kg-bookmark-content">
            <div class="kg-bookmark-title">Glosārijs</div>
            <div class="kg-bookmark-description">Klēpjdatorsir mazs līdznēsājams personālais dators, kas parasti sver 1-6 kilogramus, atkarībā no izmēra, materiāliem un citiem faktoriem. Personālais datorsir jebkurš dators, kura cena, izmērs un veiktspēja ir pielāgota individuālai lietošanai un ir paredzēta speciāli gala patērētājam, kurš ar šo i…</div>
            <div class="kg-bookmark-metadata"><img class="kg-bookmark-icon" src="https://dainas-saite.ghost.io/favicon.ico" alt=""><span class="kg-bookmark-author">dainas-saite</span><span class="kg-bookmark-publisher">Arturs Rasnacis</span></div>
         </div>
         <div class="kg-bookmark-thumbnail"><img src="https://static.ghost.org/v4.0.0/images/publication-cover.jpg" alt=""></div>
      </a>
   </figure>
</div>

The elements on the page. The sortable elements are these toggle cards and they should be sorted alphabetically. The sort needs to be preformed because elements are added one by one and ghost io platform coesnt use CMS system basis is you get what you see.

enter image description here