JSFiddle - React, Tailwind, and code Playground

by ewoiloirowrowrnwono

HTML

<div class="line"><a href="" class="del">x</a></div>
<div class="line"><a href="" class="del">x</a></div>
<div class="line"><a href="" class="del">x</a></div>
<div class="line"><a href="" class="del">x</a></div>
<div class="line"><a href="" class="del">x</a></div>
<div class="line"><a href="" class="del">x</a></div>
<div class="line"><a href="" class="del">x</a></div>
<div class="line"><a href="" class="del">x</a></div>
<div class="line"><a href="" class="del">x</a></div>
<div class="line"><a href="" class="del">x</a></div>

<div class="modal">
    <a href="#" class="yes">yes</a>
    <br>
    <a href="" class="no">no</a>
    <p>
        <a href="#" class="close-modal">close-modal
        </a>
    </p>
</div>

CSS

.line{
    margin-bottom: 10px;
    background: #9c0;
    width: 100px;
        height: 40px;
}

.modal{
    position: absolute;
    top: 30px;
    right: 30px;
    display: none;
}

JavaScript

$('.del').each(function(){
    var item = $(this).parent('.line');
    $(this).click(function(e){
        e.preventDefault();
        $('.modal').show();
        $('.yes').click(function(){
            item.fadeOut();
        });

        
    })
})

$('.close-modal').click(function(){
    $('.modal').hide();
});