JSFiddle - React, Tailwind, and code Playground

by livewirerules

HTML

<link rel="stylesheet" href="https://thrilleratplay.github.io/jquery-validation-bootstrap-tooltip/css/bootstrap-3.3.5.min.css">
<script src="https://thrilleratplay.github.io/jquery-validation-bootstrap-tooltip/js/jquery-1.11.3.min.js"></script>
<script src="https://thrilleratplay.github.io/jquery-validation-bootstrap-tooltip/js/bootstrap-3.3.5.min.js"></script>
<script src="https://thrilleratplay.github.io/jquery-validation-bootstrap-tooltip/js/jquery.validate-1.14.0.min.js"></script>
<script src="https://thrilleratplay.github.io/jquery-validation-bootstrap-tooltip/js/jquery-validate.bootstrap-tooltip.js"></script>
<form id="upload">


<table class="dd" width="100%" id="data">
  
</table>
<input name="sub" type="submit"  value="Submit values"/>    <input type="button" id="addnew" name="addnew" value="Add new row" /> 
<input type="hidden" id="items" name="items" value="1" /> 

</form>

CSS

.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

JavaScript

$(document).ready(function() {
  var currentItem = 1;
  $('#addnew').click(function(){
   currentItem++;
   $('#items').val(currentItem);
    var strToAdd = '<tr><td>Year</td><td>:</td><td><select name="year[]"  ><option value="2012">2012</option><option value="2011">2011</option></select></td><td width="7%">Week</td><td width="3%">:</td><td width="17%"><select name="week[]" ><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select></td><td width="8%">&nbsp;</td><td colspan="2">&nbsp;</td></tr><tr><td>Actual</td><td>:</td><td width="17%"><input name="actual[]"  type="text" /></td><td width="7%">PDF</td> <td width="3%">: <input id="uploadfile1" name="userfile[]" accept="application/pdf" class="btn btn-next upload" type="file" required></td></tr>';
       $('#data').append(strToAdd);
   
  });
  
  
  $("#upload").validate({
        

        submitHandler: function (form) { 
   
             $.ajax({
                 url: '<?php echo base_url(); ?>/ajax_upload',
                 type: 'POST',
                 data: $(form).serialize(),
                
                 success: function(data) {
                    if(data)
                    {
                 	  
                 	   alert("success");
                    } else {

                 	   alert("error");

                    }
     				
     				
                 },
     			error: function(data){
               
     			   alert("error");
                 },
                 cache: false,
                 contentType: false,
                 processData: false
             });

             return false;
       

	}
     
        
    });


});