JSFiddle - React, Tailwind, and code Playground

by Muthuraman B

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="row">
  <div class="regaddress">
    <div class="row regelement" id='div_1'>
      <div class="col-md-10 col-sm-10 col-10">
        <input type='text' class="form-control" placeholder='Address Line 1' id='txt_"+ nextindex +"'>
      </div>
      <div class="delet">
        <span id='remove_" + nextindex + "' class="fa fa-trash-o remove"></span>
      </div>
    </div>
    <div class="col-md-10 col-sm-10 col-10">              
      <a class="regadd">+ Address Line</a>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-10 col-sm-10 col-10">
    <label class="labgray">Address Line:</label>
  </div>
  <div class="busaddress">
    <div class="row buselement" id='div_1'>
      <div class="col-md-10 col-sm-10 col-10">
        <input type='text' class="form-control" placeholder='Address Line 1' id='txt_"+ nextindex +"'>
      </div>
      <div class="delet">
        <span id='remove_" + nextindex + "' class="fa fa-trash-o remove"></span>
      </div>
    </div>
    <div class="col-md-10 col-sm-10 col-10">          
      <a class="busadd">+ Address Line</a>
    </div>
  </div>
</div>

CSS

a {color: #007bff!important;}
.mt10 {margin-top:10px;}
.row {margin: 0!important;}
.delet {float: left; display: flex;}
.delet span {color: #c36754;margin: auto; cursor: pointer;}
.busaddress, .regaddress {width:100%;}

JavaScript

//Registered Address
$(document).ready(function(){

  $(".regadd").click(function(){
    var total_element = $(".regelement").length; 
    var lastid = $(".regelement:last").attr("id");
    var split_id = lastid.split("_");
    var nextindex = Number(split_id[1]) + 1;
    var max = 4;
    if(total_element < max ){
      $(".regelement:last").after("<div class='regelement row' id='regadd_"+ nextindex +"'></div>"); 
      $("#regadd_" + nextindex).append("<div class='col-md-10 col-sm-10 col-10 mt10'><input type='text' class='form-control' placeholder='Address Line "+ nextindex +"' id='txt_"+ nextindex +"'></div><div class='delet mt10'><span id='remove_" + nextindex + "' class='remove fa fa-trash-o'></span></div>"); 
    } 
  });
  
  $('.regaddress').on('click','.remove',function(){ 
    var id = this.id;
    var split_id = id.split("_");
    var deleteindex = split_id[1];
    $("#regadd_" + deleteindex).remove();
  }); 
  
});
//Principle Place of Business
$(document).ready(function(){
  $(".busadd").click(function(){
    var total_element = $(".buselement").length; 
    var lastid = $(".buselement:last").attr("id");
    var split_id = lastid.split("_");
    var nextindex = Number(split_id[1]) + 1;
    var max = 4;
    if(total_element < max ){
      $(".buselement:last").after("<div class='buselement row' id='busadd_"+ nextindex +"'></div>"); 
      $("#busadd_" + nextindex).append("<div class='col-md-10 col-sm-10 col-10 mt10'><input type='text' class='form-control' placeholder='Address Line "+ nextindex +"' id='txt_"+ nextindex +"'></div><div class='delet mt10'><span id='remove_" + nextindex + "' class='remove fa fa-trash-o'></span></div>"); 
    } 
  });
  $('.busaddress').on('click','.remove',function(){ 
    var id = this.id;
    var split_id = id.split("_");
    var deleteindex = split_id[1];
    $("#busadd_" + deleteindex).remove();
  }); 
});