Django & Jquery : after adding forms with button jquery cannot work correctly

Question

Let's say I have the following formsets.

{% for form in formset %}
     <tr style="border:1px solid black;" id="{{ form.prefix }}-row" class="dynamic-form" >

        <td{% if forloop.first %} class="" {% endif %}></td>

            {% render_field form.choicefield1 class="form-control" %}{{form.typeTiers.errors}}
        </td>
        <td>
            {% render_field form.choicefield2 class="form-control" %}{{form.tiers1.errors}}
        </td>
        <td>{% render_field form.choicefield3 class="form-control"   %}{{form.numfacture1.errors}}
        </td>

</tr>
{% endfor %}
  <td><input type="submit" name="ajoutligne" value="Ajouter une ligne" class="btn btn-primary" id="add-row" style="background-color: #8C1944; border-color: #8C1944; float:right;margin: 5px;" onclick="test()"></td></tr>

the forms are added using dynamic-formset.js , which I call in the code bellow to create a new form when clicking on my button :

$(function () {
    $('#add-row').click(function() {

        addForm(this, 'form');
    });       
})

and I need to applay jquery function on every row I add in my formset. That's why I created the function test called in onclickfunction:

var jax= -1;
function test(){
jax =jax+1;
alert($('#id_form-'+jax+'-typeTiers').attr('name'));
$("#id_form-"+jax+"-typeTiers").change(function () {

    alert($('#id_form-'+jax+'-typeTiers').attr('name'));
    x="<option>5</option>";
    y="<option>0</option>";
       $("#id_form-"+jax+"-tiers").html(x);
       $("#id_form-"+jax+"-numfacture").html(y);
      });

      }

what I need is to make my rows independent of each other, so if I change the field1 in my first row, only the second field in the same row changes, without affecting the other rows.

however I have two problems :

The first : when I load the page in the first place, I have the first row showed, but I can't apply the test() function on it because test() is executed only when clicking on "add" button. So I dont know how to make it work for the first time. in addition to that test() is only applied on the first row if the second row is added. same thing : test() is only applied on the second row if the tird row is added.

The second : is when I click on ajoutligne button more than 1 time, the x and y variables that should be given to the other two fields in the same row field $("#id_form-"+jax+"-tiers").html(x);$("#id_form-"+jax+"-numfacture").html(y);, they are showing on the fields of the row that has the last value of jax.

For example : if I click on the ajoutligne 3 times, so jax=3, and if we are in the row 0 , this is what should happen when changing choicefield1:

$("#id_form-"+0+"-tiers").html(x);$("#id_form-"+0+"-numfacture").html(y);

however this happens instead:

$("#id_form-"+3+"-tiers").html(x);$("#id_form-"+3+"-numfacture").html(y);

I dont know how to solve it. I wish I explained well.

Thank You for Your help.