JSFiddle - React, Tailwind, and code Playground

by joio

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>

  <div id="map_canvas" ></div>
    
    <img src="http://www.traveltoathens.eu/wp-content/uploads/plus-square-o-1.png" class="add_item">
    <img src="http://www.traveltoathens.eu/wp-content/uploads/minus-square-o-1.png" class="minus_item">

<div id="form_items">
        <div class="form">
			<input type="text" name="form_item1[adress]" placeholder="adress" class="adress" id="adress">
			<input type="hidden" name="form_item1[map_location]" class="map_location">
            <input type="text" name="form_item1[title]" placeholder="title">        
        </div>
    </div>


    <img src="http://www.traveltoathens.eu/wp-content/uploads/plus-square-o-1.png" class="add_point">
    <img src="http://www.traveltoathens.eu/wp-content/uploads/minus-square-o-1.png" class="minus_point">
    
<div id="form_points">
        <div class="form">
            <input type="text" name="form_point1[adress]" placeholder="adress" class="adress" >
            <input type="hidden" name="form_point1[map_location]" class="map_location" placeholder="map location">
        </div>
    </div>

CSS

body{background:#EEE}
.form{padding:20px;background:#DDD;margin:20px}
.active{border:1px solid #CDF;background:#FFF}
input{padding:5px 10px;}

JavaScript

var map;


$(function() {
    var itemforms = 1;
	var pointforms = 1;
	//console.log(pointforms);
    $('.add_item').eq(0).click(function() {
        itemforms++;
        //console.log(itemforms);
        var formhtml = $('#form_items .form').eq(0).html().toString();
        formhtml = formhtml.replace(/form_item1/g, 'form_item'+itemforms);
        $('#form_items').eq(0).append('<div class="form">' + formhtml + '</div>');
		focus_map_location = jQuery('#form_items .form:last .map_location');
		//перемещаем поле с автодополнением в последнию форму
		$("#form_items .form:last .adress").removeAttr('id');
		adress_form = $("#adress").parent();
		$("#adress").clone(true).prependTo(adress_form).removeAttr('id');
		adress_name = $("#form_items .form:last .adress").attr('name');
		$("#form_items .form:last .adress").remove();
		$("#adress").prependTo($("#form_items .form:last")).attr('name',adress_name).val('');		
    });
    $('.minus_item').eq(0).click(function() {
		if(itemforms > 1)itemforms--;       
        //console.log(itemforms);
		$('#form_items .form').eq(itemforms).remove();
    });
	
    $('.add_point').eq(0).click(function() {
        pointforms++;
        //console.log(pointforms);
        var formhtml = $('#form_points .form').eq(0).html().toString();
        formhtml = formhtml.replace(/form_point1/g, 'form_point'+pointforms);
        $('#form_points').eq(0).append('<div class="form">' + formhtml + '</div>');
		focus_map_location = jQuery('#form_points .form:last .map_location');
		//перемещаем поле с автодополнением в последнию форму
		$("#form_points .form:last .adress").removeAttr('id');
		adress_form = $("#adress").parent();
		$("#adress").clone(true).prependTo(adress_form).removeAttr('id');
		adress_name = $("#form_points .form:last .adress").attr('name');
		$("#form_points .form:last .adress").remove();
		$("#adress").prependTo($("#form_points .form:last")).attr('name',adress_name).val('');
    });
    $('.minus_point').eq(0).click(function()...