JSFiddle - React, Tailwind, and code Playground

by PhilQ

HTML

<div class="courtline" id="courtline8888">
	<a href="#" data-func="add" data-item-id="8888">Add</a>
</div>

<div class="courtline" id="courtline9999">
	<a href="#" data-func="add" data-item-id="9999">Add</a>
</div>

JavaScript

var add = '<a href="#" func="add" systemID="8888" courtSystemID="1111" userID="2222" class="addCourtLinkADD" >Add</a>';
var del = '<a href="#" func="delete" systemID="8888" courtSystemID="1111" userID="2222" class="deleteCourtLinkDELETE" >Delete</a>';

$(document).ready(function(){


// If any anchor/link in a '.courtline' DIV is clicked
$(".courtline" ).on("click", "a", function( e ) {
    e.preventDefault();
	// Get information from data- attributes
    var action_func = $(this).data("func");
    var itemID = $(this).data("item-id");

	if ( action_func == 'add' ) {
		alert('Adding ' + itemID + ' now..');
		var new_link_html = '<a href="#" data-func="delete" data-item-id="' + itemID + '">Delete</a>';
	} else {
		alert('Deleting ' + itemID + ' now..');
		var new_link_html = '<a href="#" data-func="add" data-item-id="' + itemID + '">Add</a>';
	}
	
	// Replace the anchor's element with the new HTML
	$( this ).replaceWith( new_link_html );
	

});


});