JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="full_form_ul">
        <li class="full_form_ul_li" id="the_step_li">

                <button class="button" id="test_button">+[Test]</button>
                <button class="button" id="step_creation_button">+[Step]</button>

        </li> <!-- \\#the_step_li -->
</ul> <!-- \\.full_form_ul -->

JavaScript

$("#step_creation_button").click(function(event)
{   
        event.preventDefault();
        $('#the_step_li').append('<div class="step_div"><input type="text" class="step_input display"><button class="the_sub_step_button" type="button" title="button">+[Sub]</button></div>');

});

$('#the_step_li').on('click', "button", function(event) 
{

    event.preventDefault(); 
    $(this).parent('.step_div').append('<div class="sub_step_div"><input type="text" class="sub_step_input display"></div>');

});

$("#test_button").on('click', function(event) 
{

    event.preventDefault();
    
    $("#the_step_li .display").each(function()
    {
        alert($(this).val() + 'and my class is: ' + $(this).attr('class'));
    })
    
});