jQuery 画像アップロード画面で選択した画像をプレビュー表示させたい

画像１と画像２の２つ画像入力フォームがあり、それぞれ選択した画像をプレビュー表示するようにしたいのですが、画像選択すると画像１と画像2のどちらにも同じ画像がプレビュー表示されてしまいます。

画像1(userfile1)と画像2(userfile2)、それぞれ選択した画像がプレビュー表示されるようにするには、どうすれば良いのでしょうか。教えていただけますか。

jQueryの部分

$(function() {
  $('input[type=file]').after('<span></span>');

  // アップロードするファイルを選択
  $('input[type=file]').change(function() {
    var file = $(this).prop('files')[0];

    // 画像以外は処理を停止
    if (! file.type.match('image.*')) {
      // クリア
      $(this).val('');
      $('span').html('');
      return;
    }

    // 画像表示
    var reader = new FileReader();
    reader.onload = function() {
      var img_src = $('<img>').attr('src', reader.result);
      $('span').html(img_src);
    }
    reader.readAsDataURL(file);
  });
});

フォームの部分

<form enctype="multipart/form-data" method="post">
<input type="file" name="userfile1" accept="image/*">
<input type="file" name="userfile2" accept="image/*">
</form>