The issue is because your loop adds the arrow to the end of every item in the array.

To fix the issue you can use map() to wrap each item in a span, and then use join() separately to combine each element in to a single string with the arrow image between them.

In addition, don't put inline styling in your HTML, especially not when that HTML is in your JS. Use a separate stylesheet to apply styling to the content. In addition, there is no <bold /> element in HTML. Use CSS to apply font-weight to the i element instead.

Here's a working example:

let network = ['ABC', 'DES', 'FDD', 'BGR'];
let html = network.map(item => `<span>${item}</span>`);

document.querySelector('#foo').innerHTML = html.join(`<i class="fa fa-long-arrow-right"></i>`);

#foo span {
  border: 3px dotted #399bff;
}

#foo i {
  color: #d77300;
  font-weight: bold;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div id="foo"></div>

Display the output normally without the arrow. Check if it not the last index, add the arrow; otherwise; skip the arrow.

for (i=0;i<network.length;i++){
    temp = "<span style = 'border:3px dotted #399bff;'>" + network[i] + "</span>";
    if (i !== network.length-1){
        temp += "<bold style = 'color : #d77300;'> <i class='fa fa-long-arrow-right'></i></bold>"
    }
    network[i] = temp;
}

Process the first element. and add subsequent elements with the arrows first.

network=['aaa','bbb','ccc','ddd'];
network[0] = "<span style = 'border:3px dotted #399bff;'>" + network[0];
for (i=1;i<network.length;i++){
    temp ="</span><bold style = 'color : #d77300;'> <i> --></i></bold>"+"<span style = 'border:3px dotted #399bff;'>" + network[i]; 
    network[i] = temp;   
    }
document.write(network);