JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//maps.google.com/maps/api/js?sensor=false"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<body>
<div id="map" ></div>

<button id="save">Save</button>

<h3>Co-ordinates of your route:</h3>

<ul id="items"></ul>

</body>

CSS

body{
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        }
        #map{
            height: 400px;
            border-bottom: 1px solid #666666;
            margin-bottom: 20px;
        }

        h3{
            font-family: inherit;
        }
        #items{
            list-style: none;
            width: 300px;
            border: 1px solid #d8d8d8;
            padding:0;
        }
        #items li{
            background-color: #666666;
            padding: 5px;
            margin: 5px;
            color:#ffffff;
        }
        #items li span.remove{
            float: right;
            background-color: red;
            color: #ffffff;
            margin: -5px;
            padding: 5px;
            cursor:pointer;
        }

JavaScript

$(function() {

            //Create an object to hold the values and encapsulate adding, removing and saving
            function List(ul, save){
                this.items = [];
                this.ul = ul;
                this.save = save;
            }
            //add item to list
            List.prototype.add=function(item){
                this.items.push(item);
                this.rebuildDom();
            };
            //remove item from list
            List.prototype.removeAt=function(index){
                this.items.splice(index, 1);
                this.rebuildDom();
            };
            //update the contents of the <ul> list to display current list items
            List.prototype.rebuildDom=function(){
                var html='';
                for(var i = 0; i < this.items.length; i++){
                    html += '<li>'+this.items[i].join(' , ') +'<span class="remove" data-id="'+i+'">X</span></li>'
                }
                $('#'+this.ul).html(html);
            };
            //upload the data via ajax
            List.prototype.upload=function(){
                var data = {data: this.items};
                $.post('/save.php', data, function(response){
                    console.log(response);
                })
            };
            List.prototype.init = function(){
                var _this = this;
                //remove items from list when remove is clicked
                $('#'+this.ul).on('click', 'span.remove', function(){
                    var index = $(this).data('id');
                    _this.removeAt(index);
                });
                //bind to click event of save button, and upload data
                $('#'+this.save).click(function(ev){
                    ev.preventDefault();
                    _this.upload();
                });
            };

            var list = new List('items', 'save');
            list.init();


            var latlng = new google.maps.LatLng(51.4975941,...