how to append element in another each specific element

Question

so I have a button to create/ append step div and each step has an add action button element.

Question: how do I append action in a specific step for example if I add new action in step 2 then it will only create a new action in step 2

Here is the link to what i did https://jsfiddle.net/noobnoob121212/306boevh/7/

so what i did to create new step is:

    enter code here

   $(document).ready(function() {
    $(".appendstep").click(function() {
        $(".steplist").append(
            '<div class="input-group mb-3">' +
            '<div class="input-group-prepend">' +
            '<button class="btn btn-dark" type="button"><i class="bi bi-arrow-down"></i></button>' 
           +
            '<button class="btn btn-dark" type="button"><i class="bi bi-arrow-up"></i></button>' +
            '</div>' +
            '<input type="text" class="form-control" placeholder="" aria-label="" aria- 
           describedby="basic-addon1">' +
            ' <div class="input-group-append">' +
            '<button class="btn btn-dark" type="button"><i class="bi bi-trash"></i></button>' +
            '<button class="btn btn-dark" type="button"><i class="bi bi-pencil-square"></i> 
           </button>' +
            '<button class="btn btn-warning" type="button" data-toggle="modal" data- 
     target="#actionmodal"><i class="bi bi-plus-circle-fill"></i>Action</button>' +
            ' </div>' +
            '</div>'
            )
        });
    });

html:

<div class="container scroll-container">
    <div class="btn-group">
      <button style="margin-top:10px" type="button" class="btn addstep btn- 
      light"
      data-toggle="modal" data-target="#exampleModalCenter">
      create new step
     </button>
   </div>
    <div style="margin-top:20px" class="container steplist"> </div>
</div>

pop up modal to create new step:

    <!-- Modal Step-->
   <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog"
            aria-labelledby="exampleModalCenterTitle" aria-hidden="true" <div class="modal-dialog modal-dialog-centered" role="document">
         <div class="modal-footer">
                        <button type="button" class="btn btn-danger" 
      data-dismiss="modal">Cancel</button>
                        <button type="button" class="btn appendstep btn- 
          primary">Add</button>
                    </div>
                </div>
            </div>
        </div>

action modal/ popup:

<!-- Modal action -->
 <div class="modal fade" id="actionmodal" tabindex="-2" role="dialog"
        aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <form action=""></form>

                <!-- MODAL HEADER -->

                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">Add new Action</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">

                    <div class="form-group">
                        <label for="sel1">Action Name:</label>
                        <select class="form-control" id="sel1">
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                        </select>
                    </div>

               
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn appendaction btn-primary">Add</button>
                </div>
            </div>
        </div>
    </div>

Answer 1

Whenever actionmodal is open you can save the index() of div which has open that modal inside data-attribute. Then, when appendaction button is clicked get the data-attribute and then use $(".steplist.input-group:eq(" + row_no + ")").. to add new data inside your input-group div.

Demo Code :

 $(document).ready(function() { $(".appendstep").click(function() { $(".steplist").append( '<div class="input-group mb-3">' + '<div class="input-group-prepend">' + '<button class="btn btn-dark" type="button"><i class="bi bi-arrow-down"></i></button>' + '<button class="btn btn-dark" type="button"><i class="bi bi-arrow-up"></i></button>' + '</div>' + '<input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">' + ' <div class="input-group-append">' + '<button class="btn btn-dark" type="button"><i class="bi bi-trash"></i></button>' + '<button class="btn btn-dark" type="button"><i class="bi bi-pencil-square"></i> </button>' + '<button class="btn btn-warning" type="button" data-toggle="modal" data-target="#actionmodal"><i class="bi bi-plus circle-fill"</i>Action</button>' + ' </div>' + '</div>' ) }); }); //on modal show.. $("#actionmodal").on("show.bs.modal", function(e) { //saving index value from where button is clicked $(this).attr("data-row", $(e.relatedTarget).closest(".input-group").index()) }) $(".appendaction").on("click", function() { var row_no = $("#actionmodal").attr("data-row") //get index,,which is store //now append new data there... $(".steplist.input-group:eq(" + row_no + ")").append("<h5>" + $("#sel1").val() + "</h5>"); $("#actionmodal").modal("hide"); })

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/fontawesome.min.css" integrity="undefined" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <div class="container scroll-container"> <div class="btn-group"> <button style="margin-top:10px" type="button" class="btn addstep btn-light" data-toggle="modal" data-target="#exampleModalCenter"> create new step </button> </div> <div style="margin-top:20px" class="container steplist"> </div> </div> <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button> <button type="button" class="btn appendstep btn- primary">Add</button> </div> </div> </div> <div class="modal fade" id="actionmodal" tabindex="-2" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <form action=""></form> <;-- MODAL HEADER --> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLongTitle">Add new Action</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times:</span> </button> </div> <div class="modal-body"> <div class="form-group"> <label for="sel1">Action Name:</label> <select class="form-control" id="sel1"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button> <button type="button" class="btn appendaction btn-primary">Add</button> </div> </div> </div> </div>