JSFiddle - React, Tailwind, and code Playground

HTML

<div id="modify_exercise" class="dialog" title="Modify exercise">
</div>
<ul>
        <li>
            <a class="exercise" href="#" title="Exercise 1">
                Exercise 1
            </a>
        </li>
        <li>
            <a class="exercise" href="#" title="Exercise 2">
                Exercise 2
            </a>
        </li>
        <li>
            <a class="exercise" href="#" title="Exercise 3">
                Exercise 3
            </a>
        </li>

</ul>

JavaScript

var currentItem = ''; //global variable, woo!
$("#modify_exercise").dialog({
    autoOpen: false,
    resizable: false,
    modal: true,
    buttons: {
        'Modify': function() {
            var $inputs = $('#modify_exercise :input');

            var post_values = {};
            $inputs.each(function() {
                post_values[this.name] = $(this).val();
            });

            post_values.action = 'validate_form';

            //XXX: how to get the exercise name here?
            post_values.exercise_name = currentItem;
            
            console.log(post_values.exercise_name);
        }
    }
});

$(".exercise").click(function() {
    currentItem = $(this).text();
    $("#modify_exercise").dialog('open');
});