JSFiddle - React, Tailwind, and code Playground

HTML

<li id="test"></li>

JavaScript

function populateItemLinks(key, listItem)
{

    var ecLink = $('<a class="padRightRed"></a>');
            ecLink.attr("href", "#");
            ecLink.attr("key", key);
            ecLink.html("Edit Character");
            //ecLink.on("click", editCharacter);
            ecLink.appendTo(listItem);

            console.log(ecLink.attr("key"));

        ecLink = $('<a class="padLeftRed"></a>');
            ecLink.attr("href", "#");
            ecLink.attr("key", key);
            ecLink.html("Delete Character");
            ecLink.on("click", deleteCharacter);
            ecLink.appendTo(listItem);

            console.log(ecLink.attr("key"));
    
        ecLink.prop('key', 12355);
};

function deleteCharacter()
{
    var toDelete = confirm("Do you wish to delete this character?");
    if (toDelete)
    {
        var key = $(this).attr('key');
        console.log('The key attribute is:', key);
        console.log('The key property is:', this.key);
        alert("Character was deleted.");
        localStorage.removeItem(key);
        $.mobile.changePage("#home");
    }
    else
    {
        alert("Character was not deleted.");
    }
}

populateItemLinks(123, $('#test'));