JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

		<!-- start of a modal -->
		<div class="modal fade" id="action_modal" tabindex="-1" role="dialog" aria-labelledby="action_modal_label" aria-hidden="true">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title" id="action_modal_label">Popup</h5>
					</div>
					<div class="modal-body">
						<h4 class="text-zenter"></h4>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-danger" data-dismiss="modal">cancel</button>
						<button type="button" class="btn btn-primary" id="confirmed">ok</button>
					</div>
				</div>
			</div>
		</div>
		<!-- end modal -->
  <span class="glyphicon glyphicon-trash remove_comment_btn" id="remove_comment_btn_1790"
 data-toggle="modal" data-target="#action_modal" data-href="/do_delete/" data-row="1790"
 data-action="approve_remove"
 data-modal_title="Agreement"
 data-modal_body="are you sure you want to delete?"
 aria-selected="false" aria-hidden="true"> Delete 1790</span>
<br />
  <span class="glyphicon glyphicon-trash remove_comment_btn" id="remove_comment_btn_1791"
 data-toggle="modal" data-target="#action_modal"...

JavaScript

$(document).ready(function(){
	$("#action_modal").on('shown.bs.modal', function (event) {
		let button_ = $(event.relatedTarget),
			modal_ = $(this);
		let id_ = (button_.data("row") ? button_.data("row") : ""),
			question_ = (button_.data("modal_body") ? button_.data("modal_body") : ""),
			title_ = (button_.data("modal_title") ? button_.data("modal_title") : "Agreement"),
			action_ = (button_.data("action") ? button_.data("action") : false),
			url_ = (button_.data("href") ? button_.data("href") : (button_.attr("href") ? button_.attr("href") : false));
		modal_.find(".modal-title").html(title_);

		// do confirm action
		switch (action_) {
			case "approve_remove":
				const elem_ = button_.parent().parent();
				modal_.find(".modal-body").html(`${question_}`);
				$("#confirmed").on("click", function(e) {
					e.preventDefault();
					// do delete
					$(this).off();
					$.post(`${url_}${id_}`, function(data_) {
						if(data_.status == "success") {
							elem_.hide();
							elem_.parent().next().html(`<td colspan="3">${data_.message}</td>`);
							setTimeout(function() {
								elem_.parent().parent().prev().slideUp("200").remove("");
								elem_.parent().parent().slideUp("200").remove("");
							}, 5000);
						}
						else {
							$(`<tr><td colspan="3">${data_.message}</td></tr>`).insertBefore(elem_.parent());
							setTimeout(function() {
								elem_.parent().parent().prev().slideUp("200").remove();
							}, 4000);
						}
						modal_.modal("hide");
					}, "json");
				});

				break;
			default:
				console.log("No action assigned! Please inform IT department!");
				modal_.find("#confirmed").hide();
				modal_.find(".modal-body").html("No action assigned! Please inform IT department!");
				break;
		};
	});

	// reset modal
	$("#action_modal").on('hidden.bs.modal', function (event) {
		const modal_ = $(this);
		modal_.removeData();
		modal_.find(".modal-title").html("");
		modal_.find(".modal-body").html("");
	});
})