JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://e-timer.ru/js/etimer.js"></script>
<script src="https://bazaub.ru/media/celect2/select2.min.js"></script>
<script src="https://bazaub.ru/media/celect2/ru.js"></script>
<script src="https://bazaub.ru/media/datepicker/datepicker.js"></script>
<div class="addlist">
<div class="anka ambb">
<div class="w25 amrr">
<label>Select </label>
<select name="tankerendorsement_select" class="js-select2">
<option value="Select">Select</option>
<option value="Oil Operational">Oil Operational</option>
<option value="Chem Operational">Chem Operational</option>
<option value="Gas Operational">Gas Operational</option>
<option value="Oil management">Oil management</option>
<option value="Chem Management">Chem Management</option>
<option value="Gas Management">Gas Management</option>
</select>
<i class="icon-arb"></i>
</div>
<div class="w25 amrr aip">
<label>№ </label>
<input type="text" id="tankerendorsement" name="tankerendorsement" placeholder="№">
</div>
<div class="w25 amrr aip">
<label>Issued </label>
<input type="text" id="tankerendorsement_issued" name="tankerendorsement_issued" class="start" placeholder="Issued">
</div>
<div class="w25 aip">
<label>Valid </label>
<input type="text" id="tankerendorsement_valid" name="tankerendorsement_valid" class="start" placeholder="Valid">
</div>
</div>
</div>
<div class="anka ambb ankbo">
<div class="w50">
<a title="Add More" class="bbank pr AddTankerEndorsement">Add - Tanker Endorsement (if applicable)</a>
</div>
</div>
<br/> <br/> <br/>
<div class="addlist1">
<div class="anka ambb">
<div class="w25 amrr aip">
...
CSS
.anka {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.anka > *{
-ms-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
.w25{
width:45%;
position:relative;
}
.aip input {
color: #e2e5f5;
background: #2E3C63;
border: 1px solid #2E3C63;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0 20px 0 20px;
height: 50px;
line-height: 50px;
cursor: pointer;
width: 100%;
-webkit-box-shadow: inset 1px 1px 10px -1px rgba(0, 0, 0, 0.1);
box-shadow: inset 1px 1px 10px -1px rgba(0, 0, 0, 0.1);
}
.aip input:hover,
.aip input:focus {
border: 2px solid #FC780B;
color: #fff;
}
.amrr{
margin-right: 30px;
}
.ambb{
margin-bottom: 20px;
}
.bbank {
width: 400px;
text-align: center;
bottom: 0;
position: absolute;
height: 50px;
line-height: 50px;
border: 1px solid #FC780B;
background: #FC780B;
color: #fff;
font-weight: 600;
cursor: pointer;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display:block;
}
.bbank{
}
.bbank:hover {
border: 1px solid #262A30;
background: #262A30;
color: #fff;
}
.pr{
position: relative;
}
.select2{
width:100% !important;
}
.select2-container {
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
margin: 0;
position: relative;
vertical-align: middle;
}
.select2-container .select2-selection--single {
cursor: pointer;
display: block;
height: 50px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
user-select: none;
-webkit-user-select: none
}
.select2-container .select2-selection--single .select2-selection__rendered {
display: block;
padding: 0 20px 0 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.select2-container .select2-selection--single .select2-selection__clear {
background-color: transparent;
border: none;
font-size: 1em
}
.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered...
JavaScript
$(function() {
let counter_line = 1;
console.log(123);
$(document).on('click', '.AddChildren', function() {
let obj = `
<div class="anka ambb">
<div class="w25 amrr aip">
<label>First / Last name </label>
<input type="text" id="firstlastname0${counter_line}" name="firstlastname0${counter_line}" placeholder="First / Last name">
</div>
<div class="w25 amrr aip">
<label>Date of birth </label>
<input type="text" id="dateofbirth0${counter_line}" class="start" name="dateofbirth0${counter_line}" placeholder="Date of birth">
</div>
<div class="w25 amrr">
</div>
<div class="w25">
</div>
</div>
`;
$('.addlist1').append(obj);
counter_line++;
});
});
$(function() {
let counter_line = 1;
console.log(123);
$(document).on('click', '.AddTankerEndorsement', function() {
let obj = `
<div class="anka ambb">
<div class="w25 amrr">
<label>Select </label>
<select name="tankerendorsement_select${counter_line}" class="js-select2">
<option value="Select">Select</option>
<option value="Oil Operational">Oil Operational</option>
<option value="Chem Operational">Chem Operational</option>
<option value="Gas Operational">Gas Operational</option>
<option value="Oil management">Oil management</option>
<option value="Chem Management">Chem Management</option>
<option value="Gas Management">Gas Management</option>
</select>
<i class="icon-arb"></i>
</div>
<div class="w25 amrr aip">
<label>№ </label>
<input type="text" id="tankerendorsement${counter_line}" name="tankerendorsement${counter_line}" placeholder="№">
...