изменить непрозрачность div на основе значения ввода

У меня есть ввод кредитной карты и набор значков (основная карта, виза, открытие, американский экспресс).

Когда я ввожу номер действительной основной карточки на входе кредитной карты, я хочу, чтобы непрозрачность значка главной карты была равна 1. То же самое относится к остальным значкам и действительным номерам кредитных карт.

HTML:

<div class="payment-cc-type">
  <div class="payment-cc-icon">
  <div id="american_express" class="cc-opacity"></div>
  <div id="visa" class="cc-opacity"></div>
  <div id="master_card" class="cc-opacity"></div>
  <div id="discover" class="cc-opacity"></div>
  </div>
  <%= f.text_field :cc_type %>
</div>
<div class="payment-cc-number">
  <%= f.label :cc_number, 'Number' %>
  <%= f.text_field :cc_number %>
</div>

js:

$(document).ready(function(){
$("#payment_cc_number").change(function(){
    $('.cc-opacity').val(getCreditCardType($(this).val())).css('opacity', 1);

});
});

function getCreditCardType(accountNumber)
{

//start without knowing the credit card type
var result = "unknown";

//first check for MasterCard
if (/^5[1-5]/.test(accountNumber))
{
    result = "MasterCard";
}

//then check for Visa
else if (/^4/.test(accountNumber))
{
    result = "Visa";
}

//then check for AmEx
else if (/^3[47]/.test(accountNumber))
{
    result = "American Express";
}
//then check for Discover
else if (/^6011/.test(accountNumber))
{
    result = "Discover";
}

return result;
}

с этим кодом все значки превращают свою непрозрачность в 1, а не конкретную.