JSFiddle - React, Tailwind, and code Playground

by Amir Sharifian

HTML

<fomr action="">
<button type="button" id="add_hotel" class="btn btn-primary">
    Add Hotel</button>
<button type="button" id="remove_hotel" class="btn btn-warning">Remove Hotel</button>

<ul class="hotels_ul">
<li class="hotel_li">
<div class="row">
<div class="col-md-10">
<div class="form-group">
<label for="hotel_name[]">Hotel Name:</label>
<input type="text" name="hotel_name[]" id="hotel_name[]" class="form-control" placeholder="Hotel Name">
</div>
</div>
<div class="col-md-10">
<div class="form-group">
<label for="hotelRate[]">Hotel Rate: </label>
<select name="hotelRate[]" id="hotelRate[]" class="form-control">
<option value=""></option>
<option value="متل">متل</option>
<option value="یک ستاره">یک ستاره</option>
<option value="دو ستاره">دو ستاره</option>
<option value="سه ستاره">سه ستاره</option>
 <option value="سه ستاره تاپ">سه ستاره تاپ</option>
<option value="چهار ستاره">چهار ستاره</option>
<option value="چهار ستاره تاپ">چهار ستاره تاپ</option>
<option value="پنج ستاره">پنج ستاره</option>
<option value="پنج ستاره تاپ">پنج ستاره تاپ</option>
<option value="هفت ستاره">هفت ستاره</option>
<option value="هتل آپارتمان">هتل آپارتمان</option>
</select>
 </div>
</div>
<div class="col-md-10">
<div class="form-group">
<label for="room1[]">Room 1</label>
<input name="room1[]" id="room1[]" value="" class="form-control" placeholder="Price">
</div>  
</div>
<div class="col-md-10">
<div class="form-group">
<label for="room2[]">Room 2</label>
<input name="room2[]" id="room2[]" value="" class="form-control" placeholder="Price">
</div>  
</div>
<div class="col-md-10">
<div class="form-group">
<label for="room3[]">Room 3</label>
<input name="room3[]" id="room3[]" value="" class="form-control" placeholder="Price">
 </div>  
</div>
<div class="col-md-10">
<div class="form-group">
<label for="room4[]">Room 4</label>
<input name="room4[]" id="room4[]" value="" class="form-control" placeholder="Price">
</div>  
</div>
<div class="col-md-20">
<div class="form-group">
<label...

CSS

ul li{
    border-bottom:3px solid #000;
    padding-bottom:5px;
}

JavaScript

$("#add_hotel").click(function(){
    $(".hotels_ul").append('<li class="hotel_li"><div class="row"><div class="col-md-10"><div class="form-group"><label for="hotel_name[]">نام هتل</label><input type="text" name="hotel_name[]" id="hotel_name[]" class="form-control" placeholder="نام هتل"></div></div><div class="col-md-10"><div class="form-group"><label for="hotelRate[]">درجه هتل </label><select name="hotelRate[]" id="hotelRate[]" class="form-control"><option value=""></option><option value="متل">متل</option><option value="یک ستاره">یک ستاره</option><option value="دو ستاره">دو ستاره</option><option value="سه ستاره">سه ستاره</option><option value="سه ستاره تاپ">سه ستاره تاپ</option><option value="چهار ستاره">چهار ستاره</option><option value="چهار ستاره تاپ">چهار ستاره تاپ</option><option value="پنج ستاره">پنج ستاره</option><option value="پنج ستاره تاپ">پنج ستاره تاپ</option><option value="هفت ستاره">هفت ستاره</option><option value="هتل آپارتمان">هتل آپارتمان</option></select></div></div><div class="col-md-10"><div class="form-group"><label for="room1[]">قیمت 2 تخته (هر نفر)-تومان</label><input name="room1[]" id="room1[]" value="" class="form-control" placeholder="قیمت 2 تخته (هر نفر)-تومان"></div></div><div class="col-md-10"><div class="form-group"><label for="room2[]">قیمت 1 تخته (هر نفر)-تومان</label><input name="room2[]" id="room2[]" value="" class="form-control" placeholder="قیمت 1 تخته (هر نفر)-تومان"></div></div><div class="col-md-10"><div class="form-group"><label for="room3[]">کودک با تخت 6 تا 12سال (هر نفر)-تومان</label><input name="room3[]" id="room3[]" value="" class="form-control" placeholder="کودک با تخت 6 تا 12 سال (هر نفر)-تومان"></div></div><div class="col-md-10"><div class="form-group"><label for="room4[]">کودک بدون تخت 2 تا 6 سال (هر نفر)-تومان</label><input name="room4[]" id="room4[]" value="" class="form-control" placeholder="کودک بدون تخت 2 تا 6 سال (هر نفر)-تومان"></div></div><div class="col-md-20"><div class="form-group"><label...