I'm trying to make some sort of random images generator. I want to do this with the help of javascript, with multiple variables and functions.

This is how it stands right now:

**HTML**

```
<head>
<link type="text/css" rel="stylesheet" href="StyleSheet.css">
<script src="functions.js"></script>
    <meta charset="utf-8" />
    <title>Pack opener</title>
</head>
<body>
    <div class="header">
        test
    </div>

    <div class="buttons">
        <button class="button button1" onclick="genPack();">Generations</button>
    </div>

    <div class="imgholder">
        <img src="" alt="" id="img">
    </div>
</body>

```

**Javascript**

```
var img1 = new Array("image1.png", "image2.png");
var img2 = new Array("image3.png", "image4.png");
var img3 = new Array("image5.png", "image6.png");

function addimg1() {
var randomimg1= Math.floor(Math.random() * img1.length);
document.getElementById("img").src = img1[randomimg1];
}

function addimg2() {
    var randomimg2= Math.floor(Math.random() * img2.length);
    document.getElementById("img").src = img2[randomimg2];
}

function addimg3() {
    var randomimg3= Math.floor(Math.random() * img3.length);
    document.getElementById("img").src = img3[randomimg3];
}

function total() {
    addimg1();
    addimg1();
    addimg1();
    addimg1();
    addimg2();
    addimg2();
    addimg2();
    addimg3();
    addimg3();
    addimg3();
}

```

Currently the code is working fine, but it only shows the last function in the total function. I want it to display 10 images next to eachother.