I am new to javascript. I am writing a 'click' event with mapon. it runs successfully but always return the result from the last click.

      var jsonline = {linelist: []};
        var geojsonline = {
            type: "FeatureCollection",
            features:[],
        };

    map.on('click', 'stations-layer', (e) => {
    // Copy coordinates array.
    const coordinates = e.features[0].geometry.coordinates.slice();
    const lat_c = e.features[0].properties.lat;
    const lng_c = e.features[0].properties.lng;
    var description = e.features[0].properties.pid;
    console.log(description)

    urlflow = "http://dev.spatialdatacapture.org:8866/data/bikeselect/"+description;
    console.log(urlflow)

        function prepare_line(){

            $.getJSON( urlflow , function(data) {
               jsonline.linelist=[]
                $.each(data, function(k,v){
                    jsonline.linelist.push(v);
                })
                geojsonline.features=[]
                for (var i = 0; i < jsonline.linelist.length; i++){
                    geojsonline.features.push({
                        "type": "Feature",
                        "properties": {
                            "flows": jsonline.linelist[i].flows,
                            "start_station_name": jsonline.linelist[i].start_station_name,
                        },
                        "geometry": {
                            "type": "LineString",
                            "coordinates": [[jsonline.linelist[i].start_lng, jsonline.linelist[i].start_lat],[jsonline.linelist[i].end_lng, jsonline.linelist[i].end_lat]]
                        }
                    } )
               }
            })
        }
        $(document).ready(function(){
            prepare_line();
        });
        console.log(geojsonline)

          map.getSource('lines_try').setData(geojsonline);


        });