JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
    
    <head>
        <title>TakeMeHome</title>
    </head>
    
    <body>
        <center>
                Your Place:<input id="source" type="text"/><br/>
                Friend1:<input id="friend1" type="text"/><br/>
                <div id="button">Add!</div>
            <!-- Fiddle does not support forms submit -->
            <div id="sumbit_button">GO!</div>
            <div id="map" style = "width: 500px; height: 500px"></div>
            
        </center>
        
    </body>
    
</html>

CSS

input{
	margin: 10px 4px;
}

JavaScript

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

$('#button').click(function () {
    if (friends_cnt < 11) {
        
        $('<div>Friend' + (friends_cnt+1) + ':<input type="text" id="friend' + (friends_cnt+1) + '"/></div>').insertAfter('#friend'+friends_cnt);
        friends_cnt++;
    }
    else {
        console.log("Limit reached");
    }
});

$('#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);
                }
                
                console.log("response : ");
                console.log(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;
                    }
                    
                }
                
                console.log("distance : ");
                console.log(distance);
            }
        });
});