مشكلة في تكرار عنصر معين في "JavaScript "jQuery

السلام عليكم ورحمة الله وبركاته

أعمل على موقع رفع صور ، وما أردت فعله هو أنه عندما يختار الزائرة الصورة بإستخدام

<input type="file">

يتم إختيار الملف ويظهر input file ثاني اذا أراد أن يرفع صورة ثانية / كتبت هذا الكود :

$(".up-pic").change(function() {
    $(".up-pic").after("<input class='up-pic' type='file' name='pic' accept='image/*'>");
});

المشكلة أني جربت في البداية append() ولكنها لما تعمل ولما يتكرر العنص في حالة اختيار شيئ ، أما after() فهي تعمل ولكن المشكلة أنه عند اختيار الصورة سيتكرر مرة واحدة فقط وفي حال أنك إخترت صورة من input الثاني الذي لديه نفس كلاس input الأول فلن يتكرر عنصر ثالث . لم أعلم ماهي المشكلة تحديدا فما أريده هو أن يتكرر عند الاختيار 3 مرات و4 مرات و5 إلخ.

للتوضيح أكثر على ما أقصده قمت برفع المثال هنا :

---

هذا كود html طبعا :

<input class='up-pic' type='file' name='pic' accept='image/*'>