How to use $(this) for File Reader image src?

How to use $(this) for File Reader image src?

I am trying to get a preview of selected photos and the code below works
but when I select a second photo, the src of the first one also changes.
How can I have it so only the previewPhoto that is being appended changes
its src?
$(function(){
$("#photo").change(showPreview);
});
function showPreview(e) {
var $input = $(this);
var inputFiles = this.files;
if(inputFiles == undefined || inputFiles.length == 0) return;
var inputFile = inputFiles[0];
var reader = new FileReader();
reader.onload = function(event) {
$("<div class='preview'></div>").append("<img
class='previewPhoto'/>").appendTo("#previewBox");
$('.previewPhoto').attr('src', event.target.result);
};
reader.onerror = function(event) {
alert("ERROR: " + event.target.error.code);
};
reader.readAsDataURL(inputFile);
}