не работает jquery show/hide by dropdown

Question

не работает jquery show/hide by dropdown, когда есть много выпадающих списков с тем же классом или id. , когда сбрасывание изменений затрагивает все элементы. пожалуйста, помогите мне

$(document).ready(function(){ 
 
    $(".gatewayname").hide(); 
 
    $(".bankname").show(); 
 
    $(".paytype").on("change", function() { 
 
\t \t var val = $(this).val(); 
 
      if (val === "bank"){ 
 
       $(".gatewayname").hide(); 
 
       $(".bankname").show(); 
 
      }else{ 
 
       $(".gatewayname").show(); 
 
       $(".bankname").hide(); 
 
      } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td><select name="paytype" class="paytype"><option value="bank">Bank</option><option value="online">Online</option></select> 
 
     <br><br> 
 
     <select class="gatewayname"><option value="paypal">Paypal</option>option value="Card"></option>Card</select><br> 
 
     <input type="text" name="bankname" class="bankname"></td> 
 
\t </tr> 
 
<tr> 
 
    <td><select name="paytype" class="paytype"><option value="bank">Bank</option><option value="online">Online</option></select> 
 
     <br><br> 
 
     <select class="gatewayname"><option value="paypal">Paypal</option>option value="Card"></option>Card</select><br> 
 
     <input type="text" name="bankname" class="bankname"></td> 
 
</tr> 
 
      
 
      
 
<tr> 
 
<td><select name="paytype" class="paytype"><option value="bank">Bank</option><option value="online">Online</option></select> 
 
<br><br> 
 
<select class="gatewayname"><option value="paypal">Paypal</option>option value="Card"></option>Card</select><br> 
 
<input type="text" name="bankname" class="bankname"></td> 
 
</tr> 
 
</table>

jsfiddle demo

Answer 1

вам нужно использовать $ (это), ближайший() и находку()

$(document).ready(function(){ 
    $(".gatewayname").hide(); 
    $(".bankname").show(); 
    $(".paytype").on("change", function() { 
     var val = $(this).val(); 
      if (val === "bank"){ 
       $(this).closest('td').find(".gatewayname").hide(); 
       $(this).closest('td').find(".bankname").show(); 
      }else{ 
       $(this).closest('td').find(".gatewayname").show(); 
       $(this).closest('td').find(".bankname").hide(); 
      } 
    }); 
}); 

Updated Demo

или вы можете использовать $ (это) и nextAll()

$(document).ready(function(){ 
    $(".gatewayname").hide(); 
    $(".bankname").show(); 
    $(".paytype").on("change", function() { 
     var val = $(this).val(); 
      if (val === "bank"){ 
       $(this).nextAll(".gatewayname").hide(); 
       $(this).nextAll(".bankname").show(); 
      }else{ 
       $(this).nextAll(".gatewayname").show(); 
       $(this).nextAll(".bankname").hide(); 
      } 
    }); 
}); 

DEMO