How to pass dynamic value to jquery validation function

Question

I have a form which have some dynamically added input,

Here i input have total_amt = 100;

How can i, form should not submit until, sum of all the dynamically added inputs must be equal to total_amt

Here is my code.

$(function(){
            var i = 1;
            $('#add_more').click(function(event) {
                event.preventDefault();
                $('input.items').last().attr('name', 'item['+i+']');
                $('#cart_items').append($('#tmp_cart').html());

                $('input[name="item['+i+']"]').rules("add", {
                    required: true,
                    depositsSum : function(){
                        return $(this).val();
                    },
                      messages:'Sum of total items should be equal to 100',
                });

                    i++;
                });

        $.validator.addMethod("depositsSum", function(value, element, params)
        {       
            var amnts = 0;
            $(params[0]).each(function() {
                amnts += parseFloat($(this).val());
            });

         return amnts;
        });

            $("#myForm").validate({
                rules: {
                    'item[0]': {
                        required:true
                    }
                }
            });
        })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.min.js"></script>

  <form action="" method="POST" id="myForm">
            Total Items<input type="text" value="100" name="total_amt" id="total_amt">

            <div id="cart_items">
                Items<input type="text" name="item[0]" class="items"><br/>
            </div>
            <button id="add_more">Add More</button> 
        <input type="submit" name="submit" value="submit">
    </form>
    <div id="tmp_cart" style="display: none;">
        <label>
            Items<input type="text" name="item[]" class="items">
            </label><br/>
    </div>

Answer 1

Two flaws in your code...

1. Within your .rules() method:

    depositsSum : function(){
        return $(this).val();
    },
   

   You're trying to set the parameter of you custom rule to the value of the field. This is complete nonsense. A parameter is something like Max: 10, where 10 is the parameter and it defines the rule; it's never the actual value of the field, which, by the way, always changes and is empty when the page loads. When you want to invoke the custom rule, set the parameter to true.

   And related to the next problem...

2. Within your .addMethod() method:

   $(params[0]).each(function() {
       amnts += parseFloat($(this).val());
   });
   

   The params argument would be useless in your case, since the parameter can not be used for passing the dynamic values of other fields. Use a jQuery selector to grab the other fields. Since the name begins with item, use the "starts with" selector.

   $('[name^="item"]').each(function() {
       amnts += parseFloat($(this).val());
   });