clone jquery input file was not clearing

Question

With my current code I am able to clone entire div. But if the user attach any documents then the user click add more button the data are remain same on the cloned div.

This is the code I have so far below that isn't working. You can also see this on js fiddle: Link

I have try with the following code `$(".custom-file-input").closest('form').trigger('reset'); But this was resetting the original div not the clone one. Some where I am lagging kindly please help me.

var count=0;
$(document).on("click", ".attch_add_button", function () {
    var $clone = $('.cloned-row4:eq(0)').clone();

    $clone.find('[id]').each(function(){this.id+=''});
    $clone.find('.btn_more').after("<input type='button' class='btn_right btn_less1' id='buttonless'/>")
    $clone.attr('id', "added"+(++count));
    $clone.find('.preview').hide();
    $clone.wrap('<form>');
    $clone.closest('form').trigger('reset');
    $clone.unwrap();

    $(this).parents('.medica_rpt').after($clone);
});


$(document).on('click', ".btn_less1", function (){
    var len = $('.cloned-row4').length;
    if(len>1){
        $(this).closest(".btn_less1").parents('.medica_rpt').remove();
    }
}); 

Here is the html code

<div class="medica_rpt cloned-row4" >
    <div class="row">
        <div class="col-xs-4 col-sm-3 col-md-3 col-lg-3">
            &nbsp;
        </div>
        <div class="col-xs-2 col-sm-1 col-md-2 col-lg-2 ctm_lft_mrpt">
            <label class="lbl_accep">Accepted ?</label>
        </div>
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 ctm_lft_mrpt">
            <label class="lbl_accep">Accepted by</label>
        </div>
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 ctm_lft_mrpt">
            <label class="lbl_accep">Accepted on</label>
        </div>
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 ctm_lft_mrpt">
            <label class="lbl_accepft">Document Remarks</label>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-4 col-sm-3 col-md-3 col-lg-3">
            <div class="custom-file-input" id="custom-file-input">
                <input type="file" class="check">
                <input type="text" class="txt_field ctm_widt check" id="file_name" disabled placeholder="Attached File">
                <button class="cst_select ">
                    <i class="fa  fa-rotate-90">
                    </i> Attach
                </button>
            </div>
            <a href="#" target="_blank" class="preview">View</a>
        </div>
        <div class="col-xs-2 col-sm-1 col-md-2 col-lg-2 ctm_lft_mrpt">
            <input type="checkbox">
        </div>
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 ctm_lft_mrpt">
            <input type="text" class="smipt_Field" id="accpt_by" name="accpt_by" disabled/>
        </div>
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 ctm_lft_mrpt">
            <input type="text" class="smipt_Field" id="accpt_on" name="accpt_on" disabled/>
        </div>
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 ctm_lft_mrpt">
            <select class="slt_Field" id="txt_dcmRem" name="txt_dcmRem">
                <option value="" selected='selected'>&nbsp; </option>
                <option value="COLR">Coloured Copy Required</option>
                <option value="EXPR">Expired Document</option>
                <option value="INSF">Insufficient</option>
                <option value="INVD">Invalid Document</option>
                <option value="LOWR">Low Resolution</option>
            </select>
        </div>
    </div>
    <div class="row-fluid">
        <div class="col-xs-12 col-sm-12 col-md-12 pull-right clear">
            <input type="button" class="btn_more btn_right attch_add_button"/>
            <!--<button class="btn_more btn_right attch_add_button"></button>-->
        </div>
    </div>
</div>

Thanks in advance

Kindly help suggest me I am confused here.

Answer 1

If you are cloning form elements best work around for this is to reset the cloned form.

In the fiddle example there is no form at all, so, in case you are cloning some input fields but not the whole form you might need to wrap those input inside a form, reset that form, and then unwrap.

Your JS should end up similar to this:

$(document).on("click", ".attch_add_button", function () {
    var $clone = $('.cloned-row4:eq(0)').clone();
    $clone.find('[id]').each(function(){this.id+=''});
    $clone.find('.btn_more').after("<input type='button' class='btn_right btn_less1' id='buttonless'/>")
    $clone.attr('id', "added"+(++count));
    $clone.find('#custom-file-input').val('');

    $clone.wrap('<form>');
    $clone.closest('form').reset();
    $clone.unwrap();

    $(this).parents('.medica_rpt').after($clone);
});

You might want to check slipheed's answer on THIS question