JSFiddle - React, Tailwind, and code Playground

by molily

HTML

<ul>
    <li>
        <h2>Spitfire</h2>
        <p><button href="#" class="löschen-button">löschen</button></p>
    </li>
    <li>
        <h2>Invaders must die</h2>
        <p><button href="#" class="löschen-button">löschen</button></p>
    </li>
</ul>

<div id="löschen-overlay" class="hidden">
    <h2>Wirklich löschen?</h2>
    <p class="title"></p>
    <p>
        <button type="button" class="confirm">Ja</button>
        <button type="button" class="cancel">Nein</button>
    </p>
</div>

CSS

body { font-family: sans-serif; }
.hidden { display: none; }
#löschen-overlay {
    border: 1px solid black;
    padding: 0 1em;
}

JavaScript

var löschen = function (event) {
    event.preventDefault();
    var title = $(event.currentTarget).closest('li').find('h2').text();
    $('#löschen-overlay').find('.title').text(title).end().removeClass('hidden');
};
$(document).on('click', '.löschen-button', löschen);