Split multiple value in Array & create new array for split value in Java script

I want all index value that have data in array after ":" & split it to different Array at same index number. I am able to change data for one index value but its not changing for all value

var Array = ["Alice:", "John:654", "Bob:123"];

** After Split **
var Array = ["Alice:", "John:", "Bob:"];
var new array = ["", "654", "123"];

<script>
var array = ["Alice:", "John:654", "Bob:123"];

var el = array.find(a =>a.includes(":"));
let index = array.indexOf(el);
const newArray = el.split(':')[0] + ':';

var array2 = ["", "", ""];
array2[index] = newArray;

document.getElementById("demo").innerHTML = "The value of arry is: " + el;
document.getElementById("demo2").innerHTML = "The index of arry is: " + index;
document.getElementById("demo3").innerHTML = "split value: " + newArray;
document.getElementById("demo4").innerHTML = "new arr: " + array2;
</script>

>Solution :

If I understood your question correctly, this should be a solution:

const [oldOne, newOne] = array.reduce(
    (acumm, current, index) => {
        const [name, value] = current.split(':');
        acumm[0].push(`${name}:`);
        acumm[1].push(value ?? '');
       return acumm;
     },
     [[], []]
);

Stackblitz Example

Info

// not mess up global vars, "Array" is a constructor
var Array = ["Alice:", "John:654", "Bob:123"];

** After Split **
var Array = ["Alice:", "John:", "Bob:"];

// not mess up with key words, "new" can only be called on 
// constructors and array is as far i know not one
var new array = ["", "654", "123"];