CODEWITHSUNDEEP
javascripthtmljquery
Gerald
Gerald

Reputation: 69

how to append element in another each specific element

enter image description here

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>

Upvotes: 1

Views: 97

Answers (1)

Swati
Swati

Reputation: 28522

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/[email protected]/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>

Upvotes: 1

Related Questions