JSFiddle - React, Tailwind, and code Playground

by jmansa

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<a href="#" class="delete" data-id="23">Delete the project</a>

<div class="modal fade" id="confirm-delete" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            
            <div class="modal-header">
                <h4 class="modal-title">Delete project?</h4>
            </div>
            
            <div class="modal-body delete-body">
                Are you sure you want to delete project?                
            </div>
            
            <div class="modal-footer delete-footer">
                
            </div>
        </div>
    </div>
</div>

JavaScript

$('.delete').click(function(){
			
    var pid = $(this).attr("data-id");
    var pname = $(this).attr("data-name");
         
    $(".delete-footer").html('<button type="button" class="btn btn-warning" data-dismiss="modal">Regret</button><a href="#" data-id="'+pid+'" class="btn btn-info do_delete">Delete</a>');
    $('#confirm-delete').modal('show');
    
});

$('.do_delete').click(function(){
		
    alert("I am here!");
    
    var pid = $(this).attr("data-id");
    $('#confirm-delete').modal('hide');
    
});