JSFiddle - React, Tailwind, and code Playground

by Torwan

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <form action="" method="post" class="deleteForm">
      <input name="id" value="100" type="hidden">
      <button class="btn btn-default btn-delete" data-toggle="popover" type="button"><span class="glyphicon glyphicon-trash"></span>
        </button>

    </form>
  </div>
  <!-- /.row -->
  <div class="row">
    <form action="" method="post" class="deleteForm">
      <input name="id" value="200" type="hidden">
      <button class="btn btn-default btn-delete" data-toggle="popover" type="button"><span class="glyphicon glyphicon-trash"></span>
        </button>
    </form>
  </div>
  <!-- /.row -->
  <div class="row">
    <form action="" method="post" class="deleteForm">
      <input name="id" value="300" type="hidden">
      <button class="btn btn-default btn-delete" data-toggle="popover" type="button"><span class="glyphicon glyphicon-trash"></span>
        </button>
    </form>
  </div>
  <!-- /.row -->
</div>
<!-- /.container -->

CSS

body {
		  padding: 60px;
		}

		form {
		  margin-bottom: 50px;
		}

JavaScript

$(function() {

		  var popOpts = {
		    placement: 'right',
		    title: 'Delete Item',
		    html: 'true',
		    content: 'Are you sure you want to delete this item?<br><button class="btn btn-default popover-submit" type="button">Yes</button><button class="btn btn-default" type="button">No</button>',
		    //container: 'body'
		  }


		  // Delete button popover confirmation
		  $(".btn-delete").popover(popOpts).on('shown.bs.popover', function(e) {
		    var $delete = $(this)
		    var $form = $delete.closest('form')
		    var $pop = $form.find('.popover');
		    var $popButtons = $pop.find('button').click(function() {
		      if ($(this).is('.popover-submit')) {
		        $form.submit();
		      }
		      $delete.popover('destroy').popover(popOpts);


		    })



		  });
		  $(".deleteForm").submit(function(e) {
		    e.preventDefault()
		    var postData = $(this).serializeArray();
		    console.log(postData)
		    /*$.ajax({
		      type: "POST",
		      cache: false,
		      url: "delete.php",
		      data: postData,
		    });*/
		  });

		})