Clone forms independently

I have a form of which some fields can be cloned according to the needs of the user.

I have used a java script that allows me to do it, but I have not known separates all the variables so that they work independently.

When cloning there is no problem, the value of the variables "i" and "a" are increased independently, but when I delete some of the cloned div they interact in some way.

If I delete some div of the variables "i" when I add another one of the variables "a" the value of "a" has been affected by the deletion of the div of "i".

I have tried to vary the code without success, it is very complicated to understand the logic of the code in java script.

Thanks for your help

    <script>
    $(document).ready(function(){
        var i=1;
        $('#addcli').click(function(){
            i++;
            $('#dynamic_fieldcon').append('<tr id="rowcli'+i+'"><td><div class="col-xs-3"><label for="ex1">Contacto</label><input class="form-control" name="nombreconcli[]" id="nombreconcli_'+i+'" type="text"></div><div class="col-xs-3"><label for="ex2">Teléfono</label><input class="form-control" name="telefonoconcli[]" id="telefonoconcli_'+i+'" type="text"></div><div class="col-xs-5"><label for="ex3">Mail</label><input class="form-control" name="mailconcli[]" id="mailconcli_'+i+'" type="text"></div><a href="#" name="removecli" id="cli'+i+'" id="addcli" class="btn btn-danger btn_remove">-</a></td></tr>');

        });


        $(document).on('click', '.btn_remove', function(){
            i--;
            var button_id = $(this).attr("id"); 
            $('#rowcli'+button_id+'').remove();
        });
    });
    </script>


    <script>
    $(document).ready(function(){
        var a=1;
        $('#addpro').click(function(){
            a++;
            $('#dynamic_fieldconpro').append('<tr id="rowpro'+a+'"><td><div class="col-xs-3"><label for="ex1">Contacto</label><input class="form-control" name="nombreconpro[]" id="nombreconpro_'+a+'" type="text"></div><div class="col-xs-3"><label for="ex2">Teléfono</label><input class="form-control" name="telefonoconpro[]" id="telefonoconpro_'+a+'" type="text"></div><div class="col-xs-5"><label for="ex3">Mail</label><input class="form-control" name="mailconpro[]" id="mailconpro_'+a+'" type="text"></div><a href="#" name="removepro" id="pro'+a+'"  class="btn btn-danger btn_remove">-</a></td></tr>');

        });


        $(document).on('click', '.btn_remove', function(){
            a--;
            var button_id = $(this).attr("id"); 
            $('#rowpro'+button_id+'').remove();
        }); 
    });
    </script>