JSFiddle - React, Tailwind, and code Playground

by opeta

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
Total: <input type="text" class="form-control" id="total" name="total" value="220,00" disabled="disabled"> Data: 
<input type="text" class="form-control data" id="datavenda" name="datavenda" value="07/12/2016" disabled="disabled">
<table class="table" width="100%" id="dynamic_field">  
                                    <tr> 
																			
                                         <td>Dias:</td>
										 <td><input name="dias[]" id="dias" type="text" value="" class="form-control" style="width: 40px" /></td>  
                                         <td>Venc.:</td>  
										 <td><input name="vencimento[]" id="venc" type="text" value="" class="form-control data" style="width: 91px" /></td> 
										 <td>Parc.:</td>  
										 <td><input name="parcela[]" id="parc" type="text" value="" class="form-control" style="width: 65px" /></td>
										 <td>Pag.:</td>
										 <td><select name="pagamento[]" class="form-control">
							
							<option value="1">BOLETO BANCÁRIO</option>
                     <option value="2">DINHEIRO</option>
                     <option value="3">CHEQUE</option>
                     <option value="4">CARTÃO</option>
						
							</select></td> 
										 <td><a id="adicionar" class="btn btn-success" title="Adicionar data de início e término">ADICIONAR</a></td>
                                    </tr>  
                               </table>

JavaScript

$("#dias").on("keyup", function(){
    	   	var data = $("#datavenda").val();
    		var dias = $("#dias").val();
    		dias = parseInt(dias);
    		var dmy = data.split("/");
    		var joindate = new Date(
    		parseInt(
    			dmy[2], 10),
    			parseInt(dmy[1], 10) - 1,
    			parseInt(dmy[0], 10)
    		);
    
    		joindate.setDate(joindate.getDate() + dias);
    
    		$("#venc").val(
    			("0" + joindate.getDate()).slice(-2) + "/" +
    			("0" + (joindate.getMonth() + 1)).slice(-2) + "/" + 
    			joindate.getFullYear()
    		);
    		   
    	   });
          
    var i=1;  
          $('a#adicionar').click(function(){  
               i++;  
       $('#dynamic_field').append('<tr id="row'+i+'"><td>Dias:</td><td><input name="dias[]" id="dias'+i+'" type="text" value="" style="width: 40px" class="form-control" /></td><td>Venc.:</td><td><input name="vencimento[]" id="venc'+i+'" type="text" value="" style="width: 95px" class="form-control data" /></td><td>Parc.:</td><td><input name="parcela[]" id="parc'+i+'" type="text" value="" class="form-control" style="width: 65px" /></td><td>Pag.:</td><td><select name="pagamento[]" class="form-control"><option value="1">BOLETO BANCÁRIO</option><option value="2">DINHEIRO</option><option value="3">CHEQUE</option><option value="4">CARTÃO</option> </select></td><td><a name="remove" id="'+i+'" class="btn btn-danger btn_remove">REMOVER</a></td></tr>');
    
    		$("#dias"+i+"").on("keyup", function(){
    	   	var data = $("#datavenda").val();
    		var dias = $("#dias"+i+"").val();
    		dias = parseInt(dias);
    		var dmy = data.split("/");
    		var joindate = new Date(
    		parseInt(
    			dmy[2], 10),
    			parseInt(dmy[1], 10) - 1,
    			parseInt(dmy[0], 10)
    		);
    
    		joindate.setDate(joindate.getDate() + dias);
    
    		$("#venc"+i+"").val(
    			("0" + joindate.getDate()).slice(-2) + "/" +
    			("0" + (joindate.getMonth() + 1)).slice(-2) + "/" + 
    			joindate.getFullYear()
    		);
    		  ...