画像を複数別々にアップロードする方法

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
今、画像を四角の枠内にアップロードし、その画像をドラッグ&ドロップで枠内のみ自由に移動できるという機能を作ろうとしています。
下記コードで大まかな機能は実装できているのですが、
例えば、
画像Aをアップロードしたあとに、もう一枚画像Bをアップロードすると、
すでにアップロードされている画像Aが、画像Bに置き換わってしまいます。
機能的には、画像Aは残りつつ、画像Bが新たにアップロードされるということをしたいです。

調べてみたのですが、見つからず困っております。
参考サイト、またはコードをご教示願えますでしょうか。

宜しくお願い致します。

該当のソースコード

<-- js -->
$(function() {
	var file = document.querySelector('#getphoto');

	file.onchange = function (){
		var fileList = file.files;
		if (file.files[0] == null) {
			document.querySelector('#preview').src = "";
		} else {
			//読み込み
			var reader = new FileReader();
			reader.readAsDataURL(fileList[0]);
			// ファイル複数個取得

			//読み込み後
			reader.onload = function  () {
				document.querySelector('#preview').src = reader.result;
				$('#preview').css("display", "inline-block");
			};
		};
	};

	$("#preview").draggable({
		containment: "parent",
		drag: function(e, ui) {
			$(".x_offset").text(ui.offset.left);
			$(".y_offset").text(ui.offset.top);
		}
	});

});

---------------------------
<-- html -->
<%= javascript_include_tag "corde.js" %>
<!-- コーデ登録 -->
<div class="corde-visual">
</div>

<h1>コーデ登録</h1>

	<div class="image_box">
		<img src="" id="preview" class="ui-draggable ui-draggable-handle" style="position: relative;">
	</div>

	<%= form_for(@corde_new, url: new_corde_path) do |f| %>

		<input type="image" name="corde[image]" id="preview" />
		<input type="file" name="attachment" id="getphoto">

		<label for="name">▷コーデ名</label>
		<input type="text" name="corde[corde_name]" id="corde_corde_name" />

		<label for="name">▷シーズン</label>
		<input type="radio" name="corde[season]"　value="春" id="corde_season" />春
		<input type="radio" name="corde[season]"　value="夏" id="corde_season" />夏
		<input type="radio" name="corde[season]"　value="秋" id="corde_season" />秋
		<input type="radio" name="corde[season]"　value="冬" id="corde_season" />冬
		<%= f.submit'保存' %>
	<% end %>