JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
    
    <head>
        <title>TakeMeHome</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript" src="js/app.js"></script>
        <script type="text/javascript" src="js/jquery-1.9.0.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.10.0.custom.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.10.0.custom.min.js"></script>
        <link type="text/css" rel="stylesheet" href="css/design.css"/>

    </head>
    
    <body>
        <center>
                Your Place:<input id="source" type="text"/><br/>
                <div id= "div1">Friend1:<input id="friend1" type="text"/></div><br/>
                <pre>
                <div id="button">Add!</div> <div id="button2">Remove</div></br>
            </pre>
            <div id="sumbit_button">GO!</div>
            <div id="map" style = "width: 500px; height: 500px"></div>
            
        </center>
        
    </body>
    
</html>

CSS

input{
	margin: 10px 4px;
}



#button,#button2
{
	
    width: 70%;
    margin: 0 auto;

}

JavaScript

$(document).ready(function(){


var friends_cnt = 1;
var friends = [];
var distance =[];



$('#button').click(function () {
 if (friends_cnt < 11) {

        $('<div id = div'+(friends_cnt+1)+'>Friend' + (friends_cnt+1) + ':<input type="text" id="friend' + (friends_cnt+1) + '"/></div>').insertAfter('#div'+friends_cnt);
        
       friends_cnt++;

    }

    else {
        console.log("Limit reached");
    }

});


$('#button2').click(function(){
    if(friends_cnt > 1)
    {
       $('#friend'+friends_cnt).remove();
       $('#div'+friends_cnt).remove();
       friends_cnt--;
    }     

});


$('#sumbit_button').on("click",function(){
    console.log("button clicked");
    var a =[];
    a.push($("#source").val());
    for(i=1;i<=friends_cnt;i++)
    {
        a.push($("#friend" + i).val());
    }     
    
    console.log("a :");
    console.log(a);
    
    
    var gurl = "http://maps.googleapis.com/maps/api/distancematrix/json";
    
    console.log("gurl :" + gurl);
    $.ajax(
        {
            url: gurl,
            data:{
                origins : a.join('|').replace(/ /g,'+'),
                destinations : a.join('|').replace(/ /g,'+'),
                sensor : false
            },
            success : function (response) 
            {
                console.log("response type :");
                console.log(typeof response);
                
                if(typeof response == "string"){
                	response = JSON.parse(response);
                }
                
                var rows = response.rows;
                for (var i = 0; i < rows.length; i++) 
                {
                    
                    distance[i] = [];
                    for(var j=0;j<rows[i].elements.length;j++)
                    {
                        distance[i][j] = rows[i].elements[j].distance.value;
                    }
                    
                }

            }
        });
       




// No of friends is friends_cnt
//...