上传图片后如何移动按钮？

My html code is like this :

<input type='file' multiple style="display: none;" id="upload-file" />
<div class="img-container">
    <button type="submit" class="btn btn-primary" id="upload-add-product">
        <i class="glyphicon glyphicon-plus"></i>
    </button>
</div>
<?php
    for($i=0;$i<4; $i++) {

?>
    <div class="img-container" id="box<?php echo $i ?>">
    </div>
<?php
    }
?>

My javascript code is like this :

    $("#upload-add-product").click(function(){
        $("#upload-file").click();
    });

    $(function () {
        $(":file").change(function () {
            var noOfFiles = this.files.length;
            for(var i=0; i < noOfFiles; i++) {        
                var reader = new FileReader();
                reader.onload = imageIsLoaded;
                reader.readAsDataURL(this.files[i]);
            }        
        });
    });

    function imageIsLoaded(e) {
        var imgTmpl = '<img height="142" width="162" src='+e.target.result+'>';
        var IsImgAdded=false;
        $('.img-container').each(function(){
            if($(this).find('img').length==0 && IsImgAdded==false){
                $(this).append(imgTmpl);
                IsImgAdded=true;
            }
        });     
    };

Demo and full code is like this : http://phpfiddle.org/main/code/q47z-p15c

I want to make like this :

• When user select 2 image, plus icon will move to box number 3

• When user selects 5 image, plus icon will disappear

I had try to move the plus icon, but I can't do it

How can I solve this problem?