interference entre deux script JS

Bonjour,<br />
J'ai posté une question sur ce forum à propos d'un affichage d'une image uploadée, le code marche mais je voudrai mettre une deuxième place pour une image uploadées, voici le code :

<script language="javascript">
function simulateClick() {
  var evt = document.createEvent("MouseEvents");
  evt.initMouseEvent("click", true, true, window,
    0, 0, 0, 0, 0, false, false, false, false, 0, null);
  var cb = document.getElementById("postpic"); 
  cb.dispatchEvent(evt);

}
</script>
<script language="javascript">
function simulateClick2() {
  var evt = document.createEvent("MouseEvents");
  evt.initMouseEvent("click", true, true, window,
    0, 0, 0, 0, 0, false, false, false, false, 0, null);
  var cb = document.getElementById("postpic2"); 
  cb.dispatchEvent(evt);

}
</script>
    <a href="profil.php?ppost=1"><img style="width: 18px;height: auto;position: relative;left: 0px;top: 3px;" src=""></a>
    <?php
    if (isset($_GET['ppost'])) {
        if ($_GET['ppost'] == 1) {
            ?>
<form method="POST" name="post-pic" id="post-pic" action="../serv/_upld.php" enctype="multipart/form-data">
<div class="buttons-cpost">
  <div class="button-item-cpost">
<button><img src=""></button>
    </div>
</div>
    <textarea style="max-width:80%;width:80%;left:-9%;position:relative;z-index:200;" cols="25" name="desc" rows="2" placeholder="Enter your post here...">
</textarea>

<input type="hidden" name="MAX_FILE_SIZE" value="12500000" />
<input type="file" id="postpic" name="postpic" style="display:none;"/>
<div class="caseCanvas" onClick="simulateClick()">
    <img src="" style="width: 55px;height: 55px;position: relative;top:22.5px;margin-right: auto;margin-left: auto;">
<canvas id="imageCanvas"></canvas>
<div class=""></div>
</div>
<script type="text/javascript">
var imageLoader = document.getElementById('postpic');
    imageLoader.addEventListener('change', handleImage, false);
var canvas = document.getElementById('imageCanvas');
var ctx = canvas.getContext('2d');

function handleImage(e){
    var reader = new FileReader();
    reader.onload = function(event){
        var img = new Image();
        img.onload = function(){
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img,0,0);
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);     
}

</script>

<input type="hidden" name="MAX_FILE_SIZE" value="12500000" />
<input type="file" id="postpic2" name="postpic2" style="display:none;"/>
<div class="caseCanvas" style="position:relative;left:116px;top:-116px;" onClick="simulateClick2()">
    <img src="" style="width: 55px;height: 55px;position: relative;top:22.5px;margin-right: auto;margin-left: auto;">
<canvas id="2imageCanvas"></canvas>
</div>

CODE A MODIFIER

<script type="text/javascript">
var imageLoader1 = document.getElementById('postpic2');
    imageLoader1.addEventListener('change', handleImage, false);
var canvas1 document.getElementById('2imageCanvas');
var ctx1 = canvas1.getContext('2d');

function handleImage(e){
    var reader1 = new FileReader();
    reader1.onload = function(event){
        var img1 = new Image();
        img1.onload = function(){
            canvas1.width = img1.width;
            canvas1.height = img1.height;
            ctx1.drawImage(img1,0,0);
        }
        img1.src = event.target.result;
    }
    reader1.readAsDataURL(e.target.files[0]);     
}
</script>

    <?php
}
?>

</form>
            <?php
        }
    ?>