Mapbox multiple trajectories with Turf

HTML

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Traject</title>
    <script src="https://api.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.js"></script>
    <link href="https://api.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js"></script>
    <style>
    body {
        font-family: 'Roboto', sans-serif;
        font-size: 1rem;
        color: #212529;
        font-weight: 300;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    .map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
    }
    </style>
</head>

<body>
    <div class="map" id="map"></div>
    <script>
    mapboxgl.accessToken = 'pk.eyJ1IjoibWljaGVsZGIiLCJhIjoiZGc4cHVaMCJ9.GMNtqmLjF2nQx-i-S28C5g';
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/micheldb/ckmbsebfd393y17qlexj4ktyb',
        center: [0, 30],
        minZoom: 1,
        maxZoom: 4,
        zoom: 1
    });


    var json = {
        "type": "FeatureCollection",
        "features": [{
                "type": "Feature",
                "properties": { "id": "1" },
                "geometry": {
                    "type": "LineString",
                    "coordinates": [
                        [-71.006, 42.364],
                        [-0.461, 51.478]
                    ]
                }
            },
            {
                "type": "Feature",
                "properties": { "id": "2" },
                "geometry": {
                    "type": "LineString",
                    "coordinates": [
                        [55.36, 25.249],
                        [-0.461, 51.478]
                    ]
                }
            },
            {
                "type": "Feature",
                "properties": { "id": "3" },
   ...