OL3 - LineString Draw

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ol3/3.9.0/ol.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/ol3/3.9.0/ol.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.12/proj4.js"></script>
<div id="map"></div>
<div id="coords">
    <ul id="lns_p"></ul>
</div>

CSS

html,body,#map { width:100%; height:100%; margin:0; }
#map {
    position: absolute;
    z-index: 5;
}
#coords{
    position: absolute;
    z-index: 10;
    left: 50%;
    transform: translate(-50%, 5px);
    background-color: rgba(238,238,238,.6);
    padding: 10px;
    color: #222;
    width: 350px;
    text-align: center;
}

JavaScript

// define the centre
var center = ol.proj.transform([0, 0],
        'EPSG:4326', 'EPSG:3857');

var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.MapQuest({layer: 'sat'})
        })
    ],
    view: new ol.View({
        center: center,
        zoom: 3
    })
});

var vectorSource = new ol.source.Vector();
var vectorLayer = new ol.layer.Vector({	source: vectorSource });
map.addLayer(vectorLayer);

var coords_element = document.getElementById('coords');
var coords_length = 0;
var num = 0;

var draw = new ol.interaction.Draw({
    source: vectorSource,
    type: "LineString",
    geometryFunction: function(coords, geom) {
        if (!geom) {
            geom = new ol.geom.LineString(null);
        }        
        geom.setCoordinates(coords);
        
        //if linestring changed
        if(coords.length !== coords_length){
        	coords_length = coords.length;
            var currentCoord = $(coords).get(-1);
            var coordTrans = ol.proj.transform(currentCoord, 'EPSG:3857', 'EPSG:4326');
            var lnsPoints = [];            
            lnsPoints.push(coordTrans);
            for (var i = 0; lnsPoints.length > i; i++) {
                
            // create pointNames
            function nameGen() {
                pointName = "Point ";
                function counter() {
                    num++;
                }
                counter();
                pointNameCount = pointName + num;
                return pointNameCount;
            }
                var pointPair = lnsPoints[i];
                var lon = pointPair[1];
                var lat = pointPair[0];
                var name = nameGen();

                var pointList = "<li data-pointid='" + name + "' class='feature_li'>" +
                "<span class='reveal'><i class='glyphicon glyphicon-chevron-down' onClick='closeFeatures()'></i></span> " +
                "<span class='name'>" + name + "</span>" +
  ...