Why Oninput function not work under javascript ? Please Help if possible or Suggest me alternative way :     My Html Code
    
    -----------------------------------------------------------------------
        <div class="form-group col-sm-12">
        <label for="input-text-help" >Select Vendor 
    	</label>
    								
        <select name="vname" class="form-control">
    	<option value="">Select Vendor</option>
    			
    	<?php
        foreach($Fetchvendors as $Fetch){
    									           ?>
    	<option value="<?php echo $Fetch->id;?>"><?php echo $Fetch->name; ?> 
        </option>		
    								<?php	
    								}
    								?>
    								</select>
    						
    						  </div>
    						  <div class="form-group col-sm-12">
    							<label for="input-text-help"> Date</label>
    							
    							<input type="text" name="date"  id="datepicker" class="form-control">
    							
    						  </div>
    						    <table class="table">
    									<i class="fa fa-plus" style="margin-left:500px;">**Add More**</i>
    									<thead>
    											<th>Material Name</th>
    											<th>Quantity</th>
    											<th>Price</th>
    									</thead>
    									<tbody>
    							<tr >
    								<td>
    		<select name="mname[]" class="mname">							   
    				<option value=""> Select Material </option>
    				<?php
    				foreach($FetchMateril as $Fetch){
    				?>
    				<option value="<?php echo $Fetch->id;?>"><?php echo $Fetch->mname; ?></option>		
    		<?php	
    		}
    		?>
    		</select>
    							</td>
    								<td>
    								    <input type="text" name="qty[]" class="quanitity" id="qty" placeholder="Material Unit">
    								    <!--
    								<select name="qty[]" class="quanitity">
    								
    									<option>Select Quanitity</option>
    									<?php for($i=1;$i<=50;$i++){?>
    									<option><?php echo $i;?></option>
    									<?php }?>
    								</select>
    								-->
    								</td>
    								<td>
    	<input type="text" name="price[]" class="price" id="**price**" *oninput="calculate()"*>
    						<input type="text" name="Totalprice[]" id="Totalprice" >
    						
    						&nbsp;&nbsp; </td>
    							</tr>
    							</tbody>
    							</table>
    							<div class="form-group">
    								<div class="form-group">
    								<div class="col-sm-10">
    	<input type="submit" name="submit" class="btn btn-primary" id="input-text-help" style=" margin-left:300px;" >
    								</div>
    								</div>
    								</form>
    							</div>
    				</div>
    
    In my html code have a option to add more row for multiple insert, When i click on add more option it add one row by javascript. in my input tage price **oninput** call calculate function, where calculate function calculate two input field and return in third field.
    It Work on row one but in second row totalprice not wotk mean calculate not return any value in third field
    
    My question can oninput="calculate()" function under javascript like
    
    my code when i am click **Add more** option
    
    
        <script>
    		$(document).ready(function(){
    			//alert();
    			 var i = 0;
    			$(".fa-plus").click(function(){
    				$(".table").append('<tr><td><select name="mname[]" 
        class="mname"><option>Select Material</option><?php foreach($FetchMateril as 
        $Fetch){?><option value="<?php echo $Fetch->id;?>"><?php echo $Fetch- 
        >mname;?></option><?php }?></select></td><td><input type="text" name="qty[]" 
        ></td><td><input type="text" name="price[]" class="price" value=""></td> 
        </tr>');
    			
    			i++;
    			});
    		});
    	</script>
    
    My calculate function
    
    
        function calculate() {
        var myBox1 = document.getElementById('qty').value; 
        var myBox2 = document.getElementById('price').value;
        var result = document.getElementById('Totalprice'); 
    	
        var myResult = myBox1 * myBox2;
    	//alert(myResult);
        document.getElementById('Totalprice').value = myResult;
    
        }
    

  In my html code have a option to add more row for multiple insert, When i click on add more option it add one row by javascript. in my input tage price **oninput** call calculate function, where calculate function calculate two input field and return in third field.
    It Work on row one but in second row totalprice not wotk mean calculate not return any value in third field



  In my html code have a option to add more row for multiple insert, When i click on add more option it add one row by javascript. in my input tage price **oninput** call calculate function, where calculate function calculate two input field and return in third field.
    It Work on row one but in second row totalprice not wotk mean calculate not return any value in third field

  In my html code have a option to add more row for multiple insert, When i click on add more option it add one row by javascript. in my input tage price **oninput** call calculate function, where calculate function calculate two input field and return in third field.
    It Work on row one but in second row totalprice not wotk mean calculate not return any value in third field
    Please help to solve this problem 
    Thank In Advance