How can I use two separted image upload preview?

Question

So I found a great code snippet what I want to use in my code, here it is: https://codepen.io/siremilomir/pen/jBbQGo

My problem is that I want to use 2 of them next to each other. I rewrote the IDs, copied the script two times with the new IDs but I am pretty sure about this is not the way how I should do. Unfortunately, I am really bad at JavaScript, I guess the problem is that the function takes everywhere that same input something that I do not know what it is.

Another problem is that the FontAwesome icon does not display, what can be the problem? I read this post and tried everything but still does not work: Font Awesome & Unicode

I tried this:

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            $('#indexImage1').css('background-image', 'url('+e.target.result +')');
            $('#indexImage1').hide();
            $('#indexImage1').fadeIn(650);
        }
        reader.readAsDataURL(input.files[0]);
    }
}
$("#indexImage1Upload").change(function() {
    readURL(this);
});

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            $('#indexImage2').css('background-image', 'url('+e.target.result +')');
            $('#indexImage2').hide();
            $('#indexImage2').fadeIn(650);
        }
        reader.readAsDataURL(input.files[0]);
    }
}
$("#indexImage2Upload").change(function() {
    readURL(this);
});

body {
    background: whitesmoke;
    font-family: 'Open Sans', sans-serif;
}

.container {
    max-width: 960px;
    margin: 30px auto;
    padding: 20px;
}


.avatar-upload {
    position: relative;
    max-width: 205px;
    margin: 50px auto;
}

.avatar-upload .avatar-edit {
    position: absolute;
    right: 12px;
    z-index: 1;
    top: 10px;
}

.avatar-upload .avatar-edit input {
    display: none;
}

.avatar-upload .avatar-edit input+label {
    display: inline-block;
    width: 34px;
    height: 34px;
    margin-bottom: 0;
    border-radius: 100%;
    background: #FFFFFF;
    border: 1px solid transparent;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    font-weight: normal;
    transition: all .2s ease-in-out;
}

.avatar-upload .avatar-edit input+label:hover {
    background: #f1f1f1;
    border-color: #d6d6d6;
}

.avatar-upload .avatar-preview {
    width: 192px;
    height: 192px;
    position: relative;
    border-radius: 100%;
    border: 6px solid #F8F8F8;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}

.avatar-upload .avatar-edit input+label::after {
    content: "\f040";
    font-family: 'FontAwesome';
    color: #757575;
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    text-align: center;
    margin: auto;
}

.avatar-upload .avatar-preview>div {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <div class="avatar-upload">
        <div class="avatar-edit">
            <input type='file' id="indexImage1Upload" accept=".png, .jpg, .jpeg" />
            <label for="indexImage1Upload"></label>
        </div>
        <div class="avatar-preview">
            <div id="indexImage1" style="background-image: url(http://i.pravatar.cc/500?img=7);">
            </div>
        </div>
    </div>
    
    <div class="avatar-upload">
        <div class="avatar-edit">
            <input type='file' id="indexImage2Upload" accept=".png, .jpg, .jpeg" />
            <label for="indexImage2Upload"></label>
        </div>
        <div class="avatar-preview">
            <div id="indexImage2" style="background-image: url(http://i.pravatar.cc/500?img=7);">
            </div>
        </div>
    </div>
</div>

Answer 1

You're using two functions with the same name. It's not going to be able to tell the difference between them.

You could rename the functions, or, even better, since they're doing the same thing you could use parameters and call them that way.

function readURL(inputElement, imageElement) {
    if (inputElement.files && inputElement.files[0]) {
        var reader = new FileReader();

        reader.onload = function(e) {
            imageElement.css('background-image', 'url('+e.target.result +')');
            imageElement.hide();
            imageElement.fadeIn(650);
        }

        reader.readAsDataURL(inputElement.files[0]);
    }
}

And then when you set up the listeners.

$("#indexImage1Upload").on('change', function () {
    readURL(this, $('#indexImage1'));
});

$("#indexImage2Upload").on('change', function () {
    readURL(this, $('#indexImage2'));
});

You can see it working here: https://jsfiddle.net/gv1Ls987/