Dynamically adding contents inside Jquery ui accordion doset work

Question

So I have this accordion code which has three input fields and two buttons

<div id="accordion">
  <h3>External Attendees</h3>
  <div>

    <div class="invitediv">
      <div class="form-row  invitepeople">

        <div class="col-3">

          <input type="text" class="form-control inmail" placeholder="Email" />
        </div>

        <div class="col-3">

          <input type="text" class="form-control inname" id="extname" placeholder="Name" />

        </div>
        <div class="col-3">

          <input type="text" class="form-control incnt" placeholder="Mobile No" />

        </div>
        <div class="col-1">
          <input type="button" id="reminvt" onclick="removeDiv(this);" class="btn btn-danger reminvt" value="-" />

        </div>

        <div class="col-1">
          <input type="button" id="addinvt" class="btn btn-success" value="+" />

        </div>
      </div>

    </div>

  </div>
</div>

on click this buttons calls this method

$("#addinvt").on("click", function (e) {
  debugger;

  e.preventDefault();
  var data =
    '</br> <div class="form-row  invitepeople" >' +
    '  <div class="col-3">' +
    ' <input type="text" class="form-control inmail" placeholder="Email" />' +
    " </div>" +
    '<div class="col-3">' +
    ' <input type="text" class="form-control inname" id="extname" placeholder="Name" />' +
    " </div>" +
    '<div class="col-3">' +
    '<input type="text" class="form-control incnt" placeholder="Mobile No" />' +
    "</div>" +
    '<div class="col-1">' +
    ' <input type="button" id="reminvt" onclick="removeDiv(this);" class="btn btn-danger reminvt" value="-" />' +
    "</div>" +
    '<div class="col-1">' +
    '<input type="button" id="addinvt" class="btn btn-success" value="+" />' +
    "</div>" +
    "</div>";
  $(".invitediv").append(data);
});

and appends the HTML to the div inside the accordion, so my problem is the + button only works with the element that's already present inside the accordion, I'm able to add new inputs with it but the + button of the newly added elements doesn't work, what's happening here? can someone explain me?

Answer 1

Try giving a unique id for each button, which I did here by doing this <input type="button" id="addinvt" class="btn btn-success" onclick="addDiv(this);" value="+" />

Here, var elemtnCount = document.querySelectorAll('.invitepeople').length; first I checked how many elements you already have and then incremented it for generating a new key and then added it with the ID property for generating the unique ID.

and use a function for each add(+) button click. So your button will be unique as well as you will be adding buttons with every click.

Note: Here I only made changes for add button, do the same for the remove(-) button.

function addDiv(e) {
            debugger;
var elemtnCount = document.querySelectorAll('.invitepeople').length;

var newElemCount = elemtnCount + 1;
           
            var data ='</br> <div class="form-row  invitepeople" >'+

              '  <div class="col-3">'+

                   ' <input type="text" class="form-control inmail" placeholder="Email" />'+
               ' </div>'+

                '<div class="col-3">'+

                   ' <input type="text" class="form-control inname" id="extname" placeholder="Name" />'+

               ' </div>'+
                '<div class="col-3">'+

                    '<input type="text" class="form-control incnt" placeholder="Mobile No" />'+

                '</div>'+
                '<div class="col-1">'+
                   ' <input type="button" id="reminvt" onclick="removeDiv(this);" class="btn btn-danger reminvt" value="-" />'+

                '</div>'+

                '<div class="col-1">'+
                    '<input type="button" id="addinvt'+(newElemCount)+' " class="btn btn-success" onclick="addDiv(this);" value="+" />'+

                '</div>'+
            '</div>'
            $(".invitediv").append(data);

        };

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="accordion">
                <h3>External Attendees</h3>
                <div>

                    <div class="invitediv">
                        <div class="form-row  invitepeople">

                            <div class="col-3">

                                <input type="text" class="form-control inmail" placeholder="Email" />
                            </div>

                            <div class="col-3">

                                <input type="text" class="form-control inname" id="extname" placeholder="Name" />

                            </div>
                            <div class="col-3">

                                <input type="text" class="form-control incnt" placeholder="Mobile No" />

                            </div>
                            <div class="col-1">
                                <input type="button" id="reminvt" onclick="removeDiv(this);" class="btn btn-danger reminvt" value="-" />

                            </div>

                            <div class="col-1">
                                <input type="button" id="addinvt" class="btn btn-success" onclick="addDiv(this);" value="+" />

                            </div>
                        </div>

                    </div>

                </div>
</div>