使用加号按钮进行动态选择

I am trying to do a select fields that update dynamically. I have made it work, but my page has a 'plus' button that will add other select fields when clicked

How do I make this select field added by the plus button update itself too?

This is my code for the dynamic select, and for the plus button. I tried dynamically selecting again after I click the plus button but no luck, maybe my code itself is wrong

$(document).ready(function($) { //dinamic select
  $('#subsidiary_add').change(function() {
    $.get("{{ url('compras/ordem_compra/retorna_pedido')}}", {
        id_subsidiary: $(this).val()
      },
      function(data) {
        var model = $('#id_pedido_compra_add');
        model.empty();
        $.each(data, function(key, value) {
          model.append("<option value='" + key + "'>" + value + "</option>");
        });
      }
    );
  });
});

var counter = 0;
$('.modal-body').on('click', '#add', function() { // "plus button"
  $('#plusbutton').append(
    "<label for='id_pedido_compra' class='col-md-2 col-form-label added'>Descrição</label>" +
    "<div class='form-group col-md-4 added'>" +
    "<select class='form-control' name='id_pedido_compra" + counter + "' id='teste'>" +
    "<option selected='selected' value>...</option>" +
    "</select>" +
    "</div>" +
    "<label for='quantidade_comprada' class='col-md-2 col-form-label added'>Quantidade</label>" +
    "<div class='form-group col-md-4 added'>" +
    "<input id='quantidade_comprada' class='form-control' name='quantidade_comprada" + counter + "' type='text'>" +
    "</div>"
  );
  counter++;
});