Click is not working on a new generated row

Question

I am adding a new div when clicking an icon in the previous div. But when clicking the icon on the new generated div its is not working. Please help.

JSP:

<div class="amount">
    <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
    <div class="form-group label-floating">
        <label class="control-label">Amount</label>
        <input type="text" class="form-control">
    </div>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
    <div class="form-group label-floating float-label-control" id="select-field">
        <div class="float-label-control">
            <label class="control-label">Currency
                <small>(required)</small>
            </label>
        </div>
        <select class="form-control dropdown" id="country-list">
            <option value="1">AED</option>
            <option value="2">BND</option>
            <option value="3">INR</option>
            <option value="4">OMR</option>
            <option value="5">QAR</option>
            <option value="6">SAR</option>
            <option value="7">SGD</option>
            <option value="8">TWD</option>
            <option value="9">USD</option>
        </select>           
    </div>      
</div>
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
    <i class="material-icons"id="addicon">add</i>
</div>

Jquery

 $("#addicon").click(function () {
     alert("add");
     $(".tab-pane").append('<div class="row"><div class="purpose"><div class="amount"><div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"><div class="form-group label-floating"><label class="control-label">Amount</label><input type="text" class="form-control"></div></div><div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"><div class="form-group label-floating float-label-control" id="select-field"><div class="float-label-control"><label class="control-label">Currency<small>(required)</small></label></div><select class="form-control dropdown" id="country-list"><option value="1">AED</option><option value="2">BND</option><option value="3">INR</option><option value="4">OMR</option><option value="5">QAR</option><option value="6">SAR</option><option value="7">SGD</option><option value="8">TWD</option><option value="9">USD</option></select></div></div><div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"><i class="material-icons"id="deleteicon">clear</i><i class="material-icons"id="addicon">add</i></div></div>');
 });

Please help me to solve.

Answer 1

you can only use one id per page use class instead or use onclick attribute use following code

function addRow() {
    alert("add");
    $(".tab-pane").append('<div class="row"><div class="purpose"><div class="amount"><div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"><div class="form-group label-floating"><label class="control-label">Amount</label><input type="text" class="form-control"></div></div><div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"><div class="form-group label-floating float-label-control" id="select-field"><div class="float-label-control"><label class="control-label">Currency<small>(required)</small></label></div><select class="form-control dropdown" id="country-list"><option value="1">AED</option><option value="2">BND</option><option value="3">INR</option><option value="4">OMR</option><option value="5">QAR</option><option value="6">SAR</option><option value="7">SGD</option><option value="8">TWD</option><option value="9">USD</option></select></div></div><div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"><i class="material-icons"id="deleteicon">clear</i><i onclick="addRow()" class="material-icons"id="">add</i></div></div>');
}

Answer 2

First, of your adding an element that will result in duplication of the id, Id's should always be unique.

Second, if you change the id to class, then use $(document).on('click','.addicon',function() {})

Demo

$(document).on("click", ".addicon", function() {
  $(".tab-pane").append('<div class="row"><div class="purpose"><div class="amount"><div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"><div class="form-group label-floating"><label class="control-label">Amount</label><input type="text" class="form-control"></div></div><div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"><div class="form-group label-floating float-label-control" id="select-field"><div class="float-label-control"><label class="control-label">Currency<small>(required)</small></label></div><select class="form-control dropdown" id="country-list"><option value="1">AED</option><option value="2">BND</option><option value="3">INR</option><option value="4">OMR</option><option value="5">QAR</option><option value="6">SAR</option><option value="7">SGD</option><option value="8">TWD</option><option value="9">USD</option></select></div></div><div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"><i class="material-icons"id="deleteicon">clear</i><i class="material-icons addicon">add</i></div></div>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-pane">
  <div class="row">
    <div class="amount">
      <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
        <div class="form-group label-floating">
          <label class="control-label">Amount</label>
          <input type="text" class="form-control">
        </div>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
        <div class="form-group label-floating float-label-control" id="select-field">
          <div class="float-label-control">
            <label class="control-label">Currency
                <small>(required)</small>
            </label>
          </div>
          <select class="form-control dropdown" id="country-list">
            <option value="1">AED</option>
            <option value="2">BND</option>
            <option value="3">INR</option>
            <option value="4">OMR</option>
            <option value="5">QAR</option>
            <option value="6">SAR</option>
            <option value="7">SGD</option>
            <option value="8">TWD</option>
            <option value="9">USD</option>
        </select>

        </div>

      </div>
      <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
        <i class="material-icons addicon">add</i>
      </div>
    </div>
  </div>
</div>