First you need to render clear html, without implementing any javascript into your code.

Pass your variables to html-node attrs in twig loop and remove node’s ids, use classes, like this:

 {% for item in trains %}
<div class="trainShedule">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="data_output" data-departure="{{ item.departure.time }}" data-arrival= "{{ item.arrival.time }}"></div>
            </div>
        </div>
    </div>
</div>
{% endfor %}

then improve ypur js like this:

<script>
    //you don't need params in your functions, we need to get data other way..
    function travelTime(){
        //collect nodes you want to add value
        let dataNodes = document.getElementsByClassName('data_output');

        //loop over dataNodes
        for(let i = 0; i < dataNodes.length; i++){

          //get current values for this node
          let departure = dataNodes[i].dataset.departure;
          let arrival = dataNodes[i].dataset.arrival;

          //here you do your mathematics stuff
          //.... result..

          //finally pass data to html-node          
          dataNodes[i].innerHTML = result;
        }
    }

    //don't forget to call function!
    travelTime();
</script>

<script> tags are not scoped in the way you intend it to be. Instead, you should invert your approach:

1. Add the necessary metadata, such as item.departure.time and item.arrival.time, in HTML5 data- attributes, e.g. data-departure-time="{{ item.departure.time}}".
2. Use JS to iterate through these elements and retrieve these metadata using Element.dataset. In each iteration, invoke your function travelTime() with the retrieved data, and then set the element’s innerText to the return value. You can access the value of data-departure-time attribute using Element.dataset.departureTime, for example (note the kebab-case in your markup VS camel case in the JS)

p/s: Note that you should not use duplicate IDs, so I have changed it to using a class instead.

<div
    class="trainShedule-timeTravel"
    data-departure-time="{{ item.departure.time }}"
    data-arrival-time="{{ item.arrival.time }}">

Then, in your JS, simply iterate through all elements that matches the selector .trainShedule-timeTravel:

function travelTime(firstTime, secondTime){
    let getDate = (string) => new Date(0, 0,0, string.split(':')[0], string.split(':')[1]); 
    let different = (getDate(secondTime) - getDate(firstTime));
    let hours = Math.floor((different % 86400000) / 3600000);
    let minutes = Math.round(((different % 86400000) % 3600000) / 60000);
    let result = hours + ':' + minutes;

    return result;
}

const els = document.querySelectorAll('.trainShedule-timeTravel');
Array.from(els).forEach(el => {
    el.innerText = travelTime(el.dataset.departureTime, el.dataset.arrivalTime);
});

I have two twig variables. I need to pass them to my js function travelTime()and return result in html-tag.
Here is code. It is not works :

{% for item in trains %}
<div class="trainShedule">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div id="trainShedule-timeTravel">
                {% block javascripts %}
                    <script> travelTime('{{ item.departure.time }}', '{{ item.arrival.time }}' </script>
                {% endblock %}
            </div>
        </div>
    </div>
</div>
{% endfor %}

<script>
    function travelTime(firstTime, secondTime){
        let getDate = (string) => new Date(0, 0,0, string.split(':')[0], string.split(':')[1]); 
        let different = (getDate(secondTime) - getDate(firstTime));
        let hours = Math.floor((different % 86400000) / 3600000);
        let minutes = Math.round(((different % 86400000) % 3600000) / 60000);
        let result = hours + ':' + minutes;
        $(this)[0].innerHTML = result;
    }
</script>