Add Time Slots in JS

by Faisal Khan Janjua

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="form-field">
  <div class="btn btn-transparent addDay">Add Days / Time</div>
</div>

<hr>

<p id="response"></p>

SCSS

.timeSlot {
  width: 100%;
  font-size: 0px;
  padding: 4px 6px;
  box-sizing: border-box;
  display: inline-block;
  border:1px solid #aaa;
  margin-bottom: 10px;
  & .slotField {
    width: 30%;
    font-size: 14px;
    display: inline-block;
    & label, & input {
      width: 100%;
      display: block;
		}
		&.removeSlot {
			width: 9%;
		}
  }
  & .timeControls {
    width: 100%;
    display: block;
    & * {
      font-size: 14px;
    }
    & select {
      display: block;
    }
  }
  & .btn {
    float: right;
		padding: 4px 8px;
		background: #DDD;
		border: 1px solid #DDD;
  }
}

JavaScript

$(document).ready(function(){

	var daySlot = '<div class="timeSlot" data-slot="1"><div class="timeControls"><span class="btn removeDay"><i class="fa fa-trash"></i></span><span class="btn addSlot"><i class="fa fa-plus"></i></span><label>Time Slot</label><select name="product[days][1][title]"><option value="Monday">Monday</option><option value="Tuesday">Tuesday</option><option value="Wednesday">Wednesday</option><option value="Thursday">Thursday</option><option value="Friday">Friday</option><option value="Saturday">Saturday</option><option value="Sunday">Sunday</option></select></div><div class="slotRow" data-slotrow="1"><div class="slotField timeHolder timeFrom"><label>Time From</label><input type="time" name=""/></div><div class="slotField timeHolder timeTo"><label>Time To</label><input type="time" name=""/></div><div class="slotField priceHolder"><label>Price</label><input type="text" name=""/></div><div class="slotField removeSlot"><span class="btn btn-sm btn-removeSlot"><i class="fa fa-trash"></i></span></div></div></div>';
  
  var timeSlot = '<div class="slotRow" data-slotrow=""><div class="slotField timeHolder timeFrom"><label>Time From</label><input type="time" name=""/></div><div class="slotField timeHolder timeTo"><label>Time To</label><input type="time" name=""/></div><div class="slotField priceHolder"><label>Price</label><input type="text" name=""/></div><div class="slotField removeSlot"><span class="btn btn-sm btn-removeSlot"><i class="fa fa-trash"></i></span></div></div>';

  function slotRow(elm){
    var slotNum = elm.closest('.timeSlot').attr('data-slot');
    elm.closest('.timeSlot').find('.slotRow').each(function(indexJ){
    indexJ++;
      $(this).find('.timeFrom input').attr('name', 'product[options]['+slotNum+']['+indexJ+'][from]');
      $(this).find('.timeTo input').attr('name', 'product[options]['+slotNum+']['+indexJ+'][to]');
      $(this).find('.priceHolder input').attr('name', 'product[options]['+slotNum+']['+indexJ+'][price]');
   ...