What I want is, I want to generate a new input type = text whenever a plus icon is getting clicked. SO I have written below code for the same.

$('#dvDVRdata1 .add').on('click', function() {
  addDynamicTextbox();
});

function addDynamicTextbox() {
  //alert('icon clicked');
  var numItems = $('#dvDVRdata1').length;
  alert(numItems);
  if (numItems != 5) {
    var lastfieldsid = $('#dvDVRdata1 input').last().attr('id');
    if ($('#'   lastfieldsid).val() != "") {
      var id = parseInt(lastfieldsid.substr(13, lastfieldsid.length));
      var tr2 = $("#dvDVRdata1"   id   "");
      var tr = "<tr id='dvDVRdata1"   (id   1)   "'><td><div class=''><div class=''><div class='' id='dvDVRdata1"   (id   1)   "'><label>DVR Address</label><span><input type='text'  value='' name='nmDVRAddress"   "' id='txtDVRAddress"   (id   1)   "'/></span></div></span></div></span></div></div><div class='minus'><i class='fa fa-times' aria-hidden='true'></i></div></td></tr>"
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div  id="dvDVRdata1">
  <div >
    <label for="">DVR Address </label>
    <input type="text"  id="txtDVRAddress1" runat="server" />
  </div>
  <div >
    <i  aria-hidden="true"></i>
  </div>
</div>

CodePudding user response：

Assuming that you are going to add new input field in div#dvDVRdata1. You need to append the HTMLcontent to that div as following:

$('#dvDVRdata1').append(tr);

CodePudding user response：

The thing is you need to append the element, which you did not do in the code in your question.

$('.add').on('click', function () {
    addDynamicTextbox();
});

function addDynamicTextbox() {
    //alert('icon clicked');
    var numItems = $('#dvDVRdata1 input').length;
    alert(numItems);
    if (numItems != 5) {
        var formGroup = $('#dvDVRdata1 .form-group');
        var elem = `<div id="dvDVRdata${numItems}">
                                        <label for="txtDVRAddress${numItems}">DVR Address </label>
                                        <input type="text"  id="txtDVRAddress${numItems}" runat="server" />
                                </div>`;
        formGroup.append(elem);
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8 y gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/js/all.min.js" integrity="sha512-rpLlll167T5LJHwp0waJCh3ZRf7pO6IT1 LZOhAyP6phAirwchClbTZV3iqL3BMrVxIYRbzGTpli4rfxsCK6Vw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div  id="dvDVRdata1">
  <div >
    <div id="dvDVRdata1">
      <label for="">DVR Address </label>
      <input type="text"  id="txtDVRAddress1" />
      </div>
  </div>
</div>

  <div >
     <i  aria-hidden="true"></i>
  </div>

CodePudding user response：

Couple of problem in your code.

1. Use slice(-1) to get last character of id. It's remove your dependency using hardcode substr(13,... and you can use that value to increase new generated id by 1 .
2. Check length for input using $('.form-group').find('input').length < 5 which check the length of input inside form-group class and user only able to add 5 inputs.
3. Finally don't forgot to append your generated element on form-group class using $('.form-group').append(tr); .
4. I also add example to delete added tr using minus class.

Example:

$('#dvDVRdata1 .add').on('click', function() {
  addDynamicTextbox();
});

function addDynamicTextbox() {
  //alert('icon clicked');
  var numItems = $('#dvDVRdata1').length;

  if ($('.form-group').find('input').length < 5) {
    var lastfieldsid = $('#dvDVRdata1 input').last().attr('id');
    if ($('#'   lastfieldsid).val() != "") {
      var id = parseInt(lastfieldsid.slice(-1));
      var tr2 = $("#dvDVRdata1"   id   "");
      var tr = "<tr id='dvDVRdata"   (id   1)   "'><td><div class=''><div class=''><div class='' id='dvDVRdata"   (id   1)   "'><label>DVR Address</label><span><input type='text'  value='' name='nmDVRAddress"   "' id='txtDVRAddress"   (id   1)   "'/></span></div></span></div></span></div></div><div class='minus'><i class='fa fa-times' aria-hidden='true'>Remove</i></div></td></tr>";

    }
    $('.form-group').append(tr);
  } else {
    alert("warning........")
  }
}
$(document).on('click', 'div.minus', function() {
  $(this).closest('tr').remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div  id="dvDVRdata1">
  <div >
    <label for="">DVR Address </label>
    <input type="text"  id="txtDVRAddress1" runat="server" />
  </div>
  <div >
    <i  aria-hidden="true">icon</i>
  </div>
</div>