Show multiple values into webage from unlimited add values into array

I struggles to find a solution to add lists from array[] into <p> for display on webpage, I add multiple name values into array and display the lists on webpage, so array just showed me single value, but why?

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./index.js"></script>
</head>
<body>

    <input id="inputs" type="text" placeholder="enter">

    <button onclick="myFunction()">add</button>

    <p id="test"></p>
</body>
</html>

JavaScript

function myFunction() {

    let arr = [];
    arr.join(',');
    let num = document.getElementById("inputs").value;
    arr.push(num);
    document.getElementById("test").innerHTML = arr;


}

Image

Screenshot 2022-05-19 at 15.11.29

this is not doing anything just so you are aware

and also arr exists only inside the function, so it will never have more elements than those you add to it in a single function call

I did try arr.join('<br/>') but failed

join returns a string, it doesn’t change the array on which it is used