JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<figure class="soundcloud-preview">
  <a data-frame="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/1235551306&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true" href="https://soundcloud.com/prodbydxrk/rave" rel="noopener, noreferrer" target="_blank">
    <img src="https://via.placeholder.com/350x150" />
  </a>
  <figcaption>Mit Klick auf das Vorschaubild wird eine Verbindung zu Soundcloud aufgebaut. Lesen Sie sich unsere <a href="./datenschutzinformation" target="_blank">Datenschutzerklärung</a> durch!</figcaption>
</figure>

CSS

.soundcloud-preview > a,
.soundcloud-preview > figcaption {
  display:block;
}
.soundcloud-preview.started > a, /* weglassen wenn beendet werden können soll */
.soundcloud-preview.started > figcaption {
  opacity: 0;
  pointer-events: none;
  height:0;
}
iframe{
  height:150px;
  width:300px;
}

JavaScript

;(function($){
  'use strict';

  $(document).on('DOMContentLoaded readyStates', function(){
    var options = {
          classNames:{
            started: 'started'
          },
          selectors: {
            preview: 'figure.soundcloud-preview',
            frame: '.sound-frame',
          }
        },
        frame = '<iframe class="sound-frame" allowfullscreen="allowfullscreen" allow="autoplay" frameborder="0" loading="lazy" referrerpolicy="no-referrer-when-downgrade" />',
        start = function(trigger){
          var $frame = $(frame);
 
          $frame.attr('src', trigger.dataset.frame);
          $(trigger).parent().append($frame).addClass(options.classNames.started);
        },
        end = function(trigger){
          var $frame = $(trigger).siblings(options.selectors.frame);
  
          $frame.remove();
          $(trigger).parent().removeClass(options.classNames.started);
        },
        $previews = $(options.selectors.preview),
        $triggers = $previews.children('a');

    $triggers.on('click', function(event){
      if ( $(this).parent().hasClass(options.classNames.started) ) {
        end(this);
      } else {
        $triggers.each(function(){
          end(this);
        });
        start(this);
      }
      event.preventDefault();
    });
 
  });
})(jQuery);