Javascript добавление картинок по порядку

[v.v.dankiv]

Здраствуйте. Интересует вопрос, как добавить картинки в строку по порядку их нажатия?

Пример: Есть HTML код:

<div class="tovar-1">
<img src="tovar-1.jpg" alt="tovar1">
</div>
<div class="tovar-2">
<img src="tovar-2.jpg" alt="tovar2">
</div>
<div class="tovar-3">
<img src="tovar-3.jpg" alt="tovar3">
</div>

А так же снизу пустой блок размером 100px на 10px.

Как можно сделать , чтоб при нажатии на картинку из HTML кода, она добавлялась в нижний блок , в порядке слева-направо. Когда нажимаеш езе одну, она добавляется в список после нее и т.д. Знаю что нужно использовать onClick, а вот как функцию написать непонимаю .

Буду очень благодарен Вам за ответ!

[danik.js]

<div class="tovar tovar-1">
<img src="tovar-1.jpg" alt="tovar1">
</div>
<div class="tovar tovar-2">
<img src="tovar-2.jpg" alt="tovar2">
</div>
<div class="tovar tovar-3">
<img src="tovar-3.jpg" alt="tovar3">
</div>
<div class="holder" style="border: 1px solid red"></div>
<script>
(function(){
    var images = document.querySelectorAll('.tovar img');
    var holder = document.querySelector('.holder');
    function onclick() {
        holder.appendChild(this);
    }
    for (var i = 0; i < images.length; i++) {
        images[i].onclick = onclick;
    }
})();
</script>