Applying jquery validation on dynamically added input fields using jquery validation plugin [duplicate]

I am facing an issue i want to add the jquery validation on dynamically generated input fields. I am not getting how can i apply this for all the dynamically generated input fields.

Here is my code :

<div class="inventory_table_main">
            <!-- start: TEXT AREA PANEL -->
            <div class="panel panel-white">
                <div class="panel-heading">
                    <h4 class="panel-title">Text <span class="text-bold">Area</span></h4>
                </div>
                <div class="panel-body">

                    <!--    <form action="" method="POST">  -->
                    <?php $data = array(
                        'id'=>'inventory_form', 
                        ); ?>
                    <?php  echo form_open('main/store',$data); ?>
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover" id="inv_tbl">
                            <thead>
                                <th>No</th>
                                <th>Product Name</th>
                                <th>Quantity</th>
                                <th>Price</th>
                                <th>Discount</th>
                                <th>Amount</th>
                                <th><input type="button" value="+" id="add" class="btn btn-primary"></th>
                            </thead>
                            <tbody class="detail">
                                <tr>
                                    <td class="no">1</td>
                                    <td><input type="text" class="form-control productname" name="productname[]" id="productname"></td>
                                    <td><input type="text" class="form-control quantity" name="quantity[]"></td>
                                    <td><input type="text" class="form-control price" name="price[]"></td>
                                    <td><input type="text" class="form-control discount" name="discount[]"></td>
                                    <td><input type="text" class="form-control amount" name="amount[]"></td>
                                    <td><a href="#" class="remove">Delete</a></td>  

                            </tr>  
                        </tbody>  
                        <tfoot>  
                        <th></th>  
                        <th></th>  
                        <th></th>  
                        <th></th>  
                        <th class="text-center"><button class="btn btn-success" id="save_btn" type="submit" name="sale_submit_btn">Save</button></th>  
                        <th style="text-align:center;" class="total">0<b></b></th> 

                        </tfoot>  

                        </table>

                        </div> 
                        <?php echo form_close(); ?>
<!--</form>-->


                        </div>
                    </div> 
        </div>

code for jquery:

// All custom javascript code goes here


$(function() {
    $('#add').click(function() {
        addnewrow();
    });
    $('body').delegate('.remove', 'click', function(event) {
        $(this).parent().parent().remove();
        update_tbl();
        event.preventDefault();

    });
    $('body').delegate('.quantity,.price,.discount', 'keyup', function() {
        var tr = $(this).parent().parent();

        var qty = tr.find('.quantity').val();
        var price = tr.find('.price').val();

        var dis = tr.find('.discount').val();
        var amt = (qty * price) - (qty * price * dis) / 100;
        tr.find('.amount').val(amt);
        total();
    });
});

function total() {
    var t = 0;
    $('.amount').each(function(i, e) {
        var amt = $(this).val() - 0;
        t += amt;
    });
    $('.total').html(t);
}

function addnewrow() {


    var n = ($('.detail tr').length - 0) + 1;  
    var tr = '<tr>' +
        '<td class="no">' + n + '</td>' +
        '<td><input type="text" class="form-control productname" name="productname[]"></td>' +
        '<td><input type="text" class="form-control quantity" name="quantity[]"></td>' +
        '<td><input type="text" class="form-control price" name="price[]"></td>' +
        '<td><input type="text" class="form-control discount" name="discount[]"></td>' +
        '<td><input type="text" class="form-control amount" name="amount[]"></td>' +
        '<td><a href="#" class="remove">Delete</td>' +
        '</tr>';
    $('.detail').append(tr);
}


function update_tbl(){

var n = ($('.detail tr').length - 0) + 1;

var tr = $(this).parent().parent();

        var qty = tr.find('.quantity').val();
        var price = tr.find('.price').val();

        var dis = tr.find('.discount').val();
        var amt = (qty * price) - (qty * price * dis) / 100;
        tr.find('.amount').val(amt);
        total();  

}

/*var b = jQuery("#inventory_form").validate({
      ignore: [],
      rules: {
        'productname[]': {
          required: true,
          minlength: 2,
          maxlength: 100,
          lettersonly: true
        },
        cphone: {
          required: true,
          minlength: 2,
          maxlength: 16,
          number:true,
        },


      },
      errorElement: "span",
      errorClass: "help-inline-error",
    }); */


// Code to capture the user action of CTRL+S pressed
document.addEventListener("keydown", function(e) {
      if (e.keyCode == 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey))      {
        e.preventDefault();
        //your implementation or function calls
         $('#save_btn').click();
      }   
    }, false);


// jquery validation rules for inventory table

var count = $('#productname').length;
console.log(count);
$(document).ready(function(){

$('#inventory_form').validate({

  rules:{
       'productname[]':{
          required: true,          
       },
       'quantity[]':{
           required: true,
           number:true
       },
       'price[]':{
           required: true,
           number:true
       },
       'discount[]':{
           required: true,
           number:true
       },
       'amount[]':{
         required:true,
         number:true
       }

   },
   messages:{
        'productname[]':{
          required: 'Please enter product name'
        },
        'quantity[]':{
          required: 'Please enter product quantity',
          number:'quantity must be in numbers'
        },
        'price[]':{
          required: 'Please enter product price',
          number:'price must be in numbers'
        },
        'discount[]':{
          required: 'Please enter product discount',
          number:'discount must be in numbers'         

        },
        'amount[]':{
          required: 'Please enter product amount',
          number:'discount must be in numbers'
        }

   },   
   errorClass: "text text-danger"



});






});