如何自动将媒体添加到新行/列

I am building a children web game using PHP and MySQLi and I am now making a page having pictures and audios sorted in a table having the picture displayed on the left side and the audio on the right as so:

what I want to do is, I want to add a button where user can choose another picture and audio and after selected, it will automatically add the media in a new row like so: I have found a way to add new rows but it will dissapear when I reload the page. Code

<body>
    <button onclick="myFunction()">Add new row</button>

    <table border="1" align="center" id="table1">
        <tr>
            <td><img src="images/croc.png" width="200"></td>
            <td><audio controls src="music/crocodile.mp3"></audio>
        </tr>
        <tr>
            <td><img src="images/caution.png" width="200"></td>
            <td><audio controls src="music/crocodile.mp3"></audio>
        </tr>
    </table>
    <script>
    function myFunction() {
    var table = document.getElementById("table1");
    var row = table.insertRow(-1);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    cell1.innerHTML = "NEW CELL1";
    cell2.innerHTML = "NEW CELL2";
    }
</script>
</body>
</html>

May I know how to browse for file and automatically, permanently add user's choice of media into new row of the table in the webpage?

</div>