How do I select exactly the element searched for in jQuery regardless of classes or ids?

Question

If you execute the code you will see that the second form is influenced by the first one and does not take the data for itself. Of course this is a flaw in my jQuery. The first form works perfectly, the second always takes the last value sent by the first.

I need each of you to submit your class-independent data estado repeat in both forms. This information is later sent to an Ajax that will make a query in the database.

These forms divide the same page and have the same classes by simply changing the form id. What it seems is that it always executes the form that comes first and then stops executing precisely because the selects have the same class.

Can you help me?

function buscar_cidades(e){
	
  var formid = $(e).closest("form").attr("id");
  var estado = $(".estado").val();
  
  alert(estado);
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<form id="fpf" class="" method="post" action="">
  <select name="estado" class="estado" onchange="buscar_cidades(this)">
    <option value=""></option>
    <option value="000001">AC</option>
    <option value="000002">AL</option>
    <option value="000003">AM</option>
  </select>
</form>

<form id="fpj" class="" method="post" action="">
  <select name="estado" class="estado" onchange="buscar_cidades(this)">
    <option value=""></option>
    <option value="000001">AC</option>
    <option value="000002">AL</option>
    <option value="000003">AM</option>
  </select>
</form>

Answer 1

When you use a dial like var estado = $(".estado").val(); it will always take the first value found, even if there is more in the DOM.

What you need to use is this, since your function already passes the "right element":

var estado = $(e).val(); // ou mesmo somente e.value

function buscar_cidades(e){
	
  var formid = $(e).closest("form").attr("id");
  var estado = $(e).val();
  
  alert(estado);
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<form id="fpf" class="" method="post" action="">
  <select name="estado" class="estado" onchange="buscar_cidades(this)">
    <option value=""></option>
    <option value="000001">AC</option>
    <option value="000002">AL</option>
    <option value="000003">AM</option>
  </select>
</form>

<form id="fpj" class="" method="post" action="">
  <select name="estado" class="estado" onchange="buscar_cidades(this)">
    <option value=""></option>
    <option value="000001">AC</option>
    <option value="000002">AL</option>
    <option value="000003">AM</option>
  </select>
</form>

Actually this could be done without jQuery:

function buscar_cidades(e) {
    var formid = e.form.id;
    var estado = e.value;
    alert(formid + ' - ' + estado);
}

http://jsfiddle.net/yqay7mk2/

Answer 2

In your role you should refer to the element you received and not locate it by the CSS class:

Example in Jsfiddle

function buscar_cidades(e){

  var formid = $(e).closest("form").attr("id");
  var estado = $(e).find('option:selected').val();

  alert(estado);
}

Similarly you can optimize the function to avoid successive DOM searches by jQuery:

function buscar_cidades(meuSelect){
  var $this  = $(meuSelect),
      formId = $this.closest("form").attr("id"),
      estado = $this.find('option:selected').val();

  alert(estado);
}

Note: Already mentioned in @Sergio’s reply, you have to take into account that when using the CSS class to locate the element, what is returned is the first DOM element that contains that class, which is why the value that your alert() gives is always the same.