How not to repeat the same Input request

Question

I need to create a page where I can choose a PLAN (or more) and a INSTALLMENT for each chosen plan. At the moment, when I choose the foreground, it is interfering with the options available to choose the background, and that is not the desired behavior. I would like each dropdown plan and its respective dropdown share are independent of other added plans.

Plan A:
Third Installment
Fifth Plot

Plan B:
First Installment
Second Installment
Third Installment
Fourth Installment

JS Code of the Plan

$(document).ready(function()
{
    $(".plano").change(function()
    {
        var id=$(this).val();
        var dataString = 'id='+ id;
        $.ajax
        ({
            type: "POST",
            url: "get_plano2.php",
            data: dataString,
            cache: false,
            success: function(html)
            {
                $(".parcela").html(html);
            } 
        });
    });
});

Html code

<td>
    <select name="usuarios[0][plano]" class="plano">
        <option selected="selected">Selecione</option>
            <?php
                $stmt = $DB->prepare("SELECT * FROM plano");
                    $stmt->execute();
                        while($row=$stmt->fetch(PDO::FETCH_ASSOC))
                    {
            ?>
            <option value="<?php echo $row['id_plano']; ?>"><?php echo $row['nome_plano']; ?></option>
            <?php
                    } 
            ?>
    </select>
</td>
<td>
    <select name="usuarios[0][parcela]" class="parcela">
        <option selected="selected">Selecione</option>
    </select>
</td> 
<td>
    <input type="text" name="usuarios[0][comissao_vendedor]" id="valor_total_saude_vendedor" class="calcular" placeholder="R$" onkeypress="mascara(this,mreais)" onkeyup="calcular()">
</td>

Javascript code

var AddTableRow = function(el) {
        var tbody = $(el).closest('table').find('tbody');
        var row = tbody.find('tr:last').clone();
        var name = row.find('.calcular').attr('name');
        var index = parseInt(name.match(/usuarios\[(\d+)\]\[comissao_vendedor\]/)[1], 10) + 1;
        row.find('[name^="usuarios["]').each(function() {
            if (this.name) {
                this.name = this.name.replace(/^usuarios\[\d+\]/, "usuarios[" + index + "]");
            }
        });
        tbody.append(row);
    };

Answer 1

The requisition of AJAX enter the data in the respective tr, otherwise a change in one of the Planos will affect all classes of Parcelas.

$(document).ready(function(){

    $(document).on("change", ".plano", function(){
        var $t = $(this); // << Permite o "this" ser acessado dentro do AJAX
        var id = $t.val();
        var dataString = 'id='+ id;
        $.ajax({
            type: "POST",
            url: "get_plano2.php",
            data: dataString,
            cache: false,
            success: function(html){
                $t.parents('tr').find('.parcela').html(html); // << Atualiza somente o elemento que fez alteração
            } 
        });
     })    
});

Added the $t.parent('tr').find(".parcela") will fetch the relative tr who modified the select and then locate a class element parcela.

As the element is created dynamically it is necessary to monitor a higher element, in this case the document, so any element that appears will be monitored and may have the ability to add the change. ;)