Add jquery line without changing previous value

Question

I have an Row with four inputs according to the image, which when clicking the button is added a new line. The problem is that at each insertion the value of select returns to the value of the first option, not keeping the old value selected.

Add line code

  addPlanRow = function() { 

  cols = "";
  newRow = $("<tr>");
  cols +=  '<td class="b-n">'+
               '<div class="input-group">'+
               '<select class="form-control input-sm rule-choose-plan-doctor" name="form_plan[]">'+
                  '<option>Selecione qual plano de saúde</option>'+
                  ''+listPlansDoctor()+''+
               '</select>'+
               '</div>'+
            '</td>'+                                    
            '<td class="b-n">'+
               '<div class="input-group">'+
                  '<div class="input-group-addon"><i class="ti-search"></i></div>'+
                  '<input type="text" class="form-control input-sm search-code-plan" placeholder="Pesquisar código" name="form_code_plan[]"> '+
               '</div>'+
            '</td>'+
            '<td class="b-n"> '+
               '<input type="text" class="form-control input-sm insert-value-code" name="form_value_code[]"'+
               'onKeyPress="reais(this,event)" onKeyDown="backspace(this,event)">'+
            '</td>'+
            '<td class="b-n">'+
               '<input type="text" class="form-control input-sm insert-factor-multiplier" placeholder="Fator Multiplicador" name="form_multiplier_factor[]">'+
            '</td>'+                       
            '<td class="b-n">'+

               '<div class="btn btn-sm btn-success"  onclick="addPlanRow(this)" ><i class="fa fa-plus"></i> </div>'+
               '<div class="btn btn-sm btn-danger" onclick="removePlanRow(this)"> <i class="fa fa-times"></i> </div>'+
            '</td>';           


  newRow.append(cols);

  $("#input_configurations_plan").append(newRow);

  return false;

Function iterating the select

 listPlansDoctor = function(){

$.ajax({
  type:'post',  
  dataType: 'json',  
  url: getUrl + 'json/list_plans_doctor',
  success: function(dados){
    var plans = '';
    $.each(dados, function(key, value){
        plans += '<option value="' + value.id_hp + '.' + value.name + '.' + value.choose_types + '">' + value.name + '</option>';
    });

     $('.rule-choose-plan-doctor').empty().append(plans);

  }
});    

How can I keep the value of the previous select?

Answer 1

Is that you are using a general class on the dial:

$('.rule-choose-plan-doctor').empty().append(plans);

This will change all elements with the class .rule-choose-plan-doctor. You would have to pick up only the last element with that class. Just add :last on the selector:

$('.rule-choose-plan-doctor:last').empty().append(plans);