jQuery: Indlæs nyt billede "on click" via AJAX.

Jeg har et problem som jeg har prøvet på at løse siden i går, men uden held.
For at sige det som det er så er jeg virkelig dårlig til JavaScript og har aldrig rigtig taget mig tid til at sætte mig ind i det - dumt, I know.

Nåh, men det jeg prøver på er at erstatte et billede med et andet, via AJAX, når man klikker på det. Som sagt, er dette ikke lykkedes mig endnu. Det PHP script som jeg gerne vil hente data fra, looper igennem en mappe og vælger et random billede derfra. Derefter udskriver det et nummer, imellem 1 og antallet af billeder, til skærmen.

Det virker også som det skal og jeg har tjekket at min AJAX-request henter den data som det skal. Så tydeligvis må problemet ligge i min JavaScript kode.

HTML:

<div id="img-container">
    <div id="img1-con"><img id="img1" style="float: left;" src="img/1.png" alt="" /></div>
</div>

JavaScript :

<script type="text/javascript">
    $(document).ready(function(){
        $("#img1").click(function(){
            $.post("system.php", function(data){
                $("#img1-con").html('<img id="img1" style="float: left;" src="img/' + data + '.png" alt="" />');
            });
        });
    });
</script>

Når man så klikker på billedet sker der bare intet. Der er helt sikkert en obvious fejl, men bær over med mig.

Tak på forhånd. :)