Untitled

<!DOCTYPE html>
<html lang="en">
<body>
<div th:fragment="executor" th:remove="tag">
    <br>

    <div class="executorSection form-row shadow-lg p-3 mb-3 bg-white rounded">
        <p class="text-end deleteButton visually-hidden">
           <a href="#"  class="link-danger delete-executor" >Delete</a>
        </p>
        <h5>Who is the executor</h5>

        <div class="form-group col-md-6">
            <label for="firstname" class="form-label" >Firstname</label>
            <input type="text" class="form-control" name="firstname" th:placeholder="# placeholder="Éric">
        </div>
        <div class="form-group col-md-6">
            <label for="lastname" class="form-label" >Lastname</label>
            <input type="text" class="form-control" name="lastname"  th:placeholder="# placeholder="Duhamel">
        </div>

        <div class="col-12">
            <label for="city" class="form-label" >City</label>
            <input type="text" class="form-control" name="city"  th:placeholder="# placeholder="Brossard">
        </div>
        <br>

        <div  id="" class="deleteButton alternativeExecutorSectionAdd">
            <a href="#" class="link-primary addAlternativeExecutor">Add an alternative executor</a>
        </div>
        <br>

        <div class="alternativeExecutorSection visually-hidden">

            <p class="text-end deleteButton visually-hidden">
                <a href="#" class="link-danger delete-alternative-executor" >Delete</a>
            </p>

            <h5>Alternative executor info</h5>

            <div class="form-group col-md-6">
                <label for="firstname" class="form-label">Firsname</label>
                <input type="text" class="form-control" name="firstname" placeholder="Éric">
            </div>
            <div class="form-group col-md-6">
                <label for="lastname" class="form-label" >Lastname</label>
                <input type="text" class="form-control" name="lastname"  placeholder="Duhamel">
            </div>

            <div class="col-12">
                <label for="city" class="form-label" >City</label>
                <input type="text" class="form-control" name="city" placeholder="Brossard">
            </div>
            <br>
        </div>

        <script th:inline="javascript" type="text/javascript">
            $(document).ready(function() {

                 $(".addAlternativeExecutor").on('click', function(e){
                      $(this).parent().next().removeClass('visually-hidden');
                 });


                $(".delete-alternative-executor").on('click', function(e){
                    $(this).parent().next().addClass('visually-hidden');
                });


            });
        </script>

    </div>
</body>
</html>