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"><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"></div>');

});

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

    event.preventDefault();

    $(".step_div").each(function()
    {   
        alert($(this).children('.step_input').val());
    }); // \\.step_div.each 

}); // \\#test_button.on('click')