JSFiddle - React, Tailwind, and code Playground

by Mahadevan Sivasubramanian

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css">
<div class="cloned-row4" id="cloned" name="cloned">
    <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-3 ctm_lft_mrpt">
            <label class="lbl_accep">Accepted ?</label>
        </div>
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-3 ctm_lft_mrpt">
            <label class="lbl_accep">Accepted by</label>
        </div>
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-3 ctm_lft_mrpt">
            <label class="lbl_accep">Accepted on</label>
        </div>
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-3 ctm_lft_mrpt">
            <label class="lbl_accepft">Document Remarks</label>
        </div>
    </div>
    <div class="row">

        <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-3 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-3 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-3...

CSS

.smipt_Field {
    border: 1px solid #aeaeae;
    width: 120px;
    padding: 4px;
}    
.ctm_lft_mrpt{
    margin-left:20px;
}
.custom-file-input{
    display: inline-block;
    overflow: hidden;
    position: relative;
    padding-top: 0px;
}
.custom-file-input input[type="file"] {
    height: 100%;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 29%;
    z-index: 999;
}
.cst_select{
    color: white;
    background-color: #D3832C;
    border-bottom:2px solid #000;
    width: 91px;
    height: 25px;
    border-left:0px;
    border-right:0px;
    border-top:0px;
    margin-left:20px;
}
.btn_more{
    background: transparent url(http://s9.postimg.org/fc95t36gb/btn_more.jpg);
    width:91px;
    height:27px;
};
.btn_less{
    background: transparent url(http://s9.postimg.org/qnbthgdbf/btn_less.jpg);
    width:91px;
    height:27px;
};

JavaScript

$(document).ready(function (){	//dynamic row for Attachment Table
var $preview = $(".preview");
    //var $acceptdiv = $("#accept_div");
    //$acceptdiv.hide();
    $preview.hide();
    $(".check").on("change", function(){
        alert("alert");
        var filename = this.value;
        var files = this.files;
        var URL = window.URL||window.webkitURL;
        var url = URL.createObjectURL(files[0]);
        $preview.attr("href", url);
        $preview.show();
        //$acceptdiv.show();
        document.getElementById('file_name').value = filename;
        $("#file_name").prop("disabled", true);
    });
	$(document).on("click", ".attch_add_button", function () {
	 		var i=$('.cloned-row4').length; 
            $(".cloned-row4:last").clone().insertAfter(".cloned-row4:last").attr({               
            'id': function(_, id) { return id + i },
			'name': function(_, name) { return name + i }
			}).end().find('[id]').val('').attr({ 'id': function(_, id) { return id + i }               
				
		}); 
			if(i < $('.cloned-row4').length){
				$(this).closest(".attch_add_button").removeClass('btn_more attch_add_button').addClass('btn_less');
			}
		i++; 
		return false;           
    });

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