jQuery multiple select show hide not applying to all select elements - php

Question

To keep it simple I have 2 form multiple select elements. Depending on the dropdown selected, it will auto hide or show additional input fields.
This is achieved like such:
$(document).ready(function(){
$("#find-replace1 select").change(function(){
$( "select option:selected").each(function(){
if($(this).attr("value")=="Find/Replace"){
$(".rep1").hide();
$(".find1").show();
$(".replace1").show();
} else {
$(".rep1").show();
$(".find1").hide();
$(".replace1").hide();
}
});
}).change();
});
$(document).ready(function(){
$("#find-replace2 select").change(function(){
$( "select option:selected").each(function(){
if($(this).attr("value")=="Find/Replace"){
$(".rep2").hide();
$(".find2").show();
$(".replace2").show();
} else {
$(".rep2").show();
$(".find2").hide();
$(".replace2").hide();
}
});
}).change();
});
My html is:
<p>
<form method="POST" action="#" accept-charset="UTF-8">
<div id="find-replace1" class="form-group-a">
<select class="form-control" name="priceaction">
<option value="Append">Append</option>
<option value="Prepend">Prepend</option>
<option value="Replace">Replace</option>
<option value="Find/Replace">Find/Replace</option>
</select>
</div>
<div class="form-group-a">
<input class="form-control formwidth rep1" autocomplete="off" name="value" type="text" style="display: block;">
</div>
<div class="form-group-a">
<input class="form-control formwidth find1" autocomplete="off" placeholder="find this" name="find" type="text" style="display: none;">
</div>
<div class="form-group-a">
<input class="form-control formwidth replace1" autocomplete="off" placeholder="replace with" name="replace" type="text" style="display: none;">
</div>
<div class="clear"></div>
<input type="submit" value="Update">
</form>
</p>
<hr>
<p>
<form method="POST" action="#" accept-charset="UTF-8">
<div id="find-replace2" class="form-group-a">
<select class="form-control" name="priceaction">
<option value="Append">Append</option>
<option value="Prepend">Prepend</option>
<option value="Replace">Replace</option>
<option value="Find/Replace">Find/Replace</option>
</select>
</div>
<div class="form-group-a">
<input class="form-control formwidth rep2" autocomplete="off" name="value" type="text" style="display: block;">
</div>
<div class="form-group-a">
<input class="form-control formwidth find2" autocomplete="off" placeholder="find this" name="find" type="text" style="display: none;">
</div>
<div class="form-group-a">
<input class="form-control formwidth replace2" autocomplete="off" placeholder="replace with" name="replace" type="text" style="display: none;">
</div>
<div class="clear"></div>
<input type="submit" value="Update">
</form>
</p>
Here is the jsfiddle: https://jsfiddle.net/kqjkprc1/
On my live site I actually have more than one form element but I kept it simple with 2 for this example. I notice it only applies the jQuery to the last form element on the page no matter what. Not sure why the first form element is unaffected and won't show/hide the hidden input fields.

Answer 1

On the one hand you can add different form actions like this
<form method="POST" action="update_1.php" >
</form>
<form method="POST" action="update_2.php">
</form>
on the other hand you can define differnt submit names
<form method="POST" action="#" >
<input type="submit" name="form1">
</form>
<form method="POST" action="#" >
<input type="submit" name="form2">
</form>
and get in in the php file like that
if (!empty($_POST['form1'])) {
//do something here for form 1;
}
if (!empty($_POST['form2'])) {
//do something here for form 2;
}
--- UPDATE ---
ahh ok i think i have a solution for you (first line changes)
$( "option:selected", this).each(function(){
if($(this).attr("value")=="Find/Replace"){
$(".rep1").hide();
$(".find1").show();
$(".replace1").show();
} else {
$(".rep1").show();
$(".find1").hide();
$(".replace1").hide();
}
});
https://jsfiddle.net/kqjkprc1/1/