jquery - 複数のファイルアップロードを表示するようにJqueryコードを最適化するにはどうすればよいですか？

Question

いくつかの異なるページ間で共有されるファイルアップロード部分ビューを構築しています。現在、最大5つのファイルがありますが、ViewBagまたはそのような単純なものを使用して、ページごとに最大値を設定することをお勧めします。現在、「削除」ボタンをクリックすると入力をクリアおよび非表示にする5つの異なる機能があり、削除が順不同でクリックされると、「別のファイルを追加」リンクが期待どおりに動作しません。入力を読み取りますが、「最も高い」削除された入力があった場合は、ユーザーが6番目を追加しようとするまで、制限に再び達したときにクリアされません。これが私のコードです。これらの煩わしさを解消するための提案をいただければ幸いです。

<script>
$(document).ready(function () {
    $('.upload2').hide();
    $('.upload3').hide();
    $('.upload4').hide();
    $('.upload5').hide();

    $('.showNext').click(function () {
        if (!$('.upload2').is(':visible')){
            $('.upload2').show();
        }
        else if (!$('.upload3').is(':visible')) {
            $('.upload3').show();
        }
        else if (!$('.upload4').is(':visible')) {
            $('.upload4').show();
        }
        else if (!$('.upload5').is(':visible')) {
            $('.upload5').show();
            $('.showNext').hide();
        }
        else {
            $('.showNext').hide();
        }

    });
});

function upload2Clear() {
    $('.upload2').hide('slow');
    $('.FileUpload2').val('');
    $('.DescriptionUpload2').val('');
    $('.showNext').show();
}

function upload3Clear() {
    $('.upload3').hide('slow');
    $('.FileUpload3').val('');
    $('.DescriptionUpload3').val('');
    $('.showNext').show();
}

function upload4Clear() {
    $('.upload4').hide('slow');
    $('.FileUpload4').val('');
    $('.DescriptionUpload4').val('');
    $('.showNext').show();
}

function upload5Clear() {
    $('.upload5').hide('slow');
    $('.FileUpload5').val('');
    $('.DescriptionUpload5').val('');
    $('.showNext').show();
}

<h4>Upload a File</h4>


<div class="showNext" style="position:absolute; left:33%;"><a href="javascript:void(0)">Add Another File</a></div><br />
<div style="position:absolute; left:33%;"><input type="submit" value="Upload" /></div>

<div class="upload1"><input type="file" name="FileUpload1" /><br />
    <label>Description:<br /><input type="text" name="DescriptionUpload1" size="50" maxlength="200" /></label>
</div>
<div class="upload2"><input type="file" name="FileUpload2" class="FileUpload2" />&nbsp;
    <img src="~/Images/remove.png" style="cursor: pointer;" onclick="upload2Clear();"/><br />
    <label>Description:<br /><input type="text" name="DescriptionUpload2" class="DescriptionUpload2" size="50" maxlength="200" /></label>
</div>
<div class="upload3"><input type="file" name="FileUpload3" class="FileUpload3" />&nbsp;
    <img src="~/Images/remove.png" style="cursor: pointer;" onclick="upload3Clear();"/><br />
    <label>Description:<br /><input type="text" name="DescriptionUpload3" class="DescriptionUpload3" size="50" maxlength="200" /></label>
</div>
<div class="upload4"><input type="file" name="FileUpload4" class="FileUpload4" />&nbsp;
    <img src="~/Images/remove.png" style="cursor: pointer;" onclick="upload4Clear();"/><br />
    <label>Description:<br /><input type="text" name="DescriptionUpload4" size="50" maxlength="200" /></label>
</div>
<div class="upload5"><input type="file" name="FileUpload5" class="FileUpload5" />&nbsp;
    <img src="~/Images/remove.png" style="cursor: pointer;" onclick="upload5Clear();"/><br />
    <label>Description:<br /><input type="text" name="DescriptionUpload5" class="DescriptionUpload5" size="50" maxlength="200" /></label>
</div>