JSFiddle - React, Tailwind, and code Playground

by levan gongadze

HTML

<form class="df">
		<label>თარიღი</label>

		<input type="text" name="day"  class="only-date">
		<input type="submit" value="დამატება">
		</form>

		<div class="data">

		</div>

CSS

.day {
  overflow: hidden;
  position: relative;
  margin-top: 20px;
}

.circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  position: relative;
  z-index: 999;
}

.times {
  margin-top: 20px;
  font: 14px 'bpg_arial_2009';
  overflow: hidden;
  line-height: 30px;
  position: relative;
  /*background-color: #ccc;*/
}

.times:nth-child(odd) {
    text-align: right;
    width: 50%;
}

.times:nth-child(odd) .circle {
  float: right;
  margin: 0 10px;
  background: #2d5be3;
}

.times:nth-child(odd) .line2 {
  right: 0;
}

.times:nth-child(even) {
    text-align: left;
    width: 50%;
    margin-left: 50%;
}

.times:nth-child(even) .circle {
  float: left;
  margin: 0 10px;
  background: #ffc800;
}

.times:nth-child(even) .line2 {
  left: 0;
}

.line {
  position: absolute;
  height: 100%;
  width: 1px;
  background: #dddddd;
  left: 50%;
}

.line2 {
  position: absolute;
  height: 1px;
  width: 30px;
  background: #dddddd;
  top: 15px;
}

.appendedForm {
  position: relative;
  overflow: hidden;
}

JavaScript

$('.df').submit(function(e){
    e.preventDefault();
    day = $(this).find('input[name="day"]').val()
    $('.data').append(
    '<div class="day" data-date="'+day+'">'+day+'' +
      '<form class="appendedForm">' +
  			'<div class="line"></div>' +
        '<input type="text" name="time" placeholder="დრო" value="20:00" required>' +
        '<input type="text" name="description" placeholder="აღწერა" value="აღწერა" required>' +
        '<input type="submit" placeholder="დამატება">' +
      '</form>' +
    '</div>'
    )
  });

  $(document).on('submit','.appendedForm',function(e){
  	e.preventDefault();
    name = $(this).find('input[name="time"]').val();
    description = $(this).find('input[name="description"]').val();
    $(this).append(
    '<div class="times">' +
      '<div class="circle"></div>' +
      '<div class="line2"></div>' +
    	'<span>'+name+'</span>' +
    	'<span> '+description+'</span>' +
    '</div>'
    );
  });