title: Why this javascript doesnt work?
body: <p>I have a javascript to hide an element input field depending on the value in a hidden field</p>
  
  <pre><code>  &lt;script type="text/javascript" charset="utf-8"&gt;
  
  $('#ccType').change(function(){
      if($(this).val() == 'maestro')
          $('#cvv').closest('.name').hide(); 
      else
          $('#cvv').closest('.name').show();
  });
  
      &lt;/script&gt;
  </code></pre>
  
  <p>But this is not hiding the element I want</p>
  
  <p>here is html</p>
  
  <pre><code>&lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;| todo&lt;/title&gt;
          &lt;meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"&gt;
          &lt;link rel="stylesheet" href="css/bootstrap2.css"&gt;
          &lt;link rel="stylesheet" href="css/bootstrap-select.css"&gt;
          &lt;link rel="stylesheet" href="css/animate.css"&gt;
          &lt;link rel="stylesheet" href="css/font-awesome.min.css"&gt;
          &lt;link rel="stylesheet" href="css/font.css" cache="false"&gt;
          &lt;link rel="stylesheet" href="js/fuelux/fuelux.css"&gt;
          &lt;link rel="stylesheet" href="css/plugin.css"&gt;
          &lt;link rel="stylesheet" href="css/app2.css"&gt;
          &lt;link rel="stylesheet" href="css/cards.css"&gt;
          &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="https://api.njj.com/inpage/js/tokenex-client.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
              window.onload = function getApp() {
                  var thisURL = window.location.href;
                  var thisSession = new Array();
                  thisSession = thisURL.split("?"); //This grabs all URL parameters
                  var session = thisSession[1];
                  thisSession = session.split("="); //This gets the session ID from URL
                  if (thisSession[0] == 'merchant_id') {
                      var thisApp = new Array();
                      thisApp = thisSession[1].split("&amp;");
                      var webapi_MerchantID = thisApp[0];
                      thisApp = thisSession[2].split("&amp;");
                      var passkey = thisApp[0];
                      thisApp = thisSession[3].split("&amp;");
                      var amt = thisApp[0];
                      thisApp = thisSession[4].split("&amp;");
                      var email = thisApp[0];
                      thisApp = thisSession[5].split("&amp;");
                      var mobileNo = thisApp[0];
                      thisApp = thisSession[6].split("&amp;");
                      var orderID = thisApp[0];
                      if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
                          xmlhttp = new XMLHttpRequest();
                      } else { // code for IE6, IE5
                          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                      }
                      xmlhttp.onreadystatechange = function() {
                          if (xmlhttp.readyState == 4 &amp;&amp; xmlhttp.status == 200) {
                              result = xmlhttp.responseText;
                              thisSession = result.split("&amp;");
                              if (thisSession[0] != 0) {
                                  var amount = parseFloat(thisSession[0]).toFixed(2);
                                  var x = document.getElementsByName('amount');
                                  for (var i = 0; i &lt; x.length; i++) {
                                      x[i].value = amount;
                                  }
                              }
                              var x = document.getElementsByName('merchant_id');
                              for (var i = 0; i &lt; x.length; i++) {
                                  x[i].value = thisSession[1];
                              }
                              var x = document.getElementsByName('customerReferenceNo');
                              for (var i = 0; i &lt; x.length; i++) {
                                  x[i].value = thisSession[2];
                              }
                              var x = document.getElementsByName('email');
                              for (var i = 0; i &lt; x.length; i++) {
                                  x[i].value = thisSession[3];
                              }
                              var x = document.getElementsByName('mobileNo');
                              for (var i = 0; i &lt; x.length; i++) {
                                  x[i].value = thisSession[4];
                              }
                          }
                      }
                      xmlhttp.open("GET", "initiateConnctPay.php?merchant_id=" + webapi_MerchantID + "&amp;passkey=" + passkey + "&amp;amount=" + amt + "&amp;email=" + email + "&amp;mobileNo=" + mobileNo + "&amp;orderID=" + orderID, true);
                      xmlhttp.send();
                  } else if (thisSession[0] == 'button_id') {
                      var button_id = thisSession[1];
                      if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
                          xmlhttp = new XMLHttpRequest();
                      } else { // code for IE6, IE5
                          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                      }
                      xmlhttp.onreadystatechange = function() {
                          if (xmlhttp.readyState == 4 &amp;&amp; xmlhttp.status == 200) {
                              result = xmlhttp.responseText;
                              thisSession = result.split("&amp;");
  
                              if (thisSession[0] != 0) {
                                  var amount = parseFloat(thisSession[0]).toFixed(2);
                                  var x = document.getElementsByName('amount');
                                  for (var i = 0; i &lt; x.length; i++) {
                                      x[i].value = amount;
                                  }
                              }
                              var x = document.getElementsByName('merchant_id');
                              for (var i = 0; i &lt; x.length; i++) {
                                  x[i].value = thisSession[1];
                              }
                              var x = document.getElementsByName('customerReferenceNo');
                              for (var i = 0; i &lt; x.length; i++) {
                                  x[i].value = thisSession[2];
                              }
                          }
                      }
                      xmlhttp.open("GET", "initiateButtonPay.php?button_id=" + button_id, true);
                      xmlhttp.send();
                  } else if (thisSession[0] == 'inv_no') {
                      var inv_no = thisSession[1];
                      if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
                          xmlhttp = new XMLHttpRequest();
                      } else { // code for IE6, IE5
                          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                      }
                      xmlhttp.onreadystatechange = function() {
                          if (xmlhttp.readyState == 4 &amp;&amp; xmlhttp.status == 200) {
                              result = xmlhttp.responseText;
                              thisSession = result.split("&amp;");
  
                              if (thisSession[0] != 0) {
                                  var amount = parseFloat(thisSession[0]).toFixed(2);
                                  var x = document.getElementsByName('amount');
                                  for (var i = 0; i &lt; x.length; i++) {
                                      x[i].value = amount;
                                  }
                              }
                              var x = document.getElementsByName('merchant_id');
                              for (var i = 0; i &lt; x.length; i++) {
                                  x[i].value = thisSession[1];
                              }
                              var x = document.getElementsByName('customerReferenceNo');
                              for (var i = 0; i &lt; x.length; i++) {
                                  x[i].value = thisSession[2];
                              }
                              var x = document.getElementsByName('email');
                              for (var i = 0; i &lt; x.length; i++) {
                                  x[i].value = thisSession[3];
                              }
                          }
                      }
                      xmlhttp.open("GET", "initiateInvoicePay.php?inv_no=" + inv_no, true);
                      xmlhttp.send();
                  } else if (thisSession[0] == 'resrvCode') {
  
                  } else if (thisSession[0] == 'collctCode') {
  
                  } else {
                      alert("You are unauthorized to use this application!");
                      document.getElementById("btn_process").disabled = true;
                      document.getElementById("nb_process").disabled = true;
                  }
              }
          &lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;section id="content" class="m-t-lg wrapper-md animated fadeInDown"&gt;
              &lt;div class="row m-n"&gt;
                  &lt;div class="col-md-4 col-md-offset-4 m-t-lg"&gt;
                      &lt;section class="panel"&gt;
                          &lt;header class="panel-heading bg-light"&gt;
                              &lt;ul class="nav nav-tabs nav-justified"&gt;
                                  &lt;li class="active" id="cc"&gt;&lt;a style="font-size:15px;font-weight:500;" href="#home" data-toggle="tab"&gt;Credit Card&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li id="db"&gt;&lt;a style="font-size:15px;font-weight:500;" href="#home" data-toggle="tab"&gt;Debit Card&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;&lt;a style="font-size:15px;font-weight:500;" href="#messages" data-toggle="tab"&gt;Internet Banking&lt;/a&gt;
                                  &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/header&gt;
                          &lt;div class="panel-body"&gt;
                              &lt;div class="tab-content"&gt;
                                  &lt;div class="tab-pane active" id="home"&gt;
                                      &lt;form method="post" action="./TokenProcess.php" id="cardpayment"&gt;
                                          &lt;input id="txtEncryptionKey" name="txtEncryptionKey" class="tokenex_encryptionkey" &lt;input id="txtEncryptionKey" name="txtEncryptionKey" class="tokenex_encryptionkey" type="hidden" value="MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA8gGPMwBRPuVyJReZGIkW
  H/+Bf5pnpDN1bSR2cLYLXVT8CaSnTw74qeboSnktgYCi1D9R3Bj2fYzTIwGGZb8K
  inLdxwbqZmHwrE9cFhCaHbG/fcURzl2Hnw/inqyMy
  +JB6djTq2/BdzMAhWTh3cDWq9Xu+gEkb/QCd0n1yYIdKuDISlk/AfHdWe34IvzhV
  yQIDAQAB
   " /&gt;
                                          &lt;div class="form-group" style="margin-left:0px"&gt;
                                              &lt;input type='hidden' id='ccType' name='ccType' /&gt;
                                              &lt;ul class="cards"&gt;
                                                  &lt;li class="visa"&gt;Visa&lt;/li&gt;
                                                  &lt;li class="visa_electron"&gt;Visa Electron&lt;/li&gt;
                                                  &lt;li class="mastercard"&gt;MasterCard&lt;/li&gt;
                                                  &lt;li class="maestro"&gt;Maestro&lt;/li&gt;
                                              &lt;/ul&gt;
                                          &lt;/div&gt;
                                          &lt;div class="form-group"&gt;
                                              &lt;label class="control-label"&gt;Card Number&lt;/label&gt;
                                              &lt;input type="text" name="ccnumber" id="ccnumber" placeholder="411111111111111" class="form-control tokenex_data"&gt;
                                          &lt;/div&gt;
                                          &lt;div class="form-group"&gt;
                                              &lt;label class="control-label"&gt;CVV&lt;/label&gt;
                                              &lt;input type="password" id="cvv" name="cvv" placeholder="123" class="form-control"&gt;
                                          &lt;/div&gt;
                                          &lt;div class="form-group"&gt;
                                              &lt;label class="control-label" style="display:inline;"&gt;Expiry&lt;/label&gt;
                                              &lt;div class="clearfix"&gt;
                                                  &lt;div class="inline pull-left m-r"&gt;
                                                      &lt;div style="height:30px"&gt;
                                                          &lt;select class="selectpicker" id="expiry_month" name="expiry_month"&gt;
                                                              &lt;option selected&gt;Select Month&lt;/option&gt;
                                                              &lt;option value="01"&gt;January&lt;/option&gt;
                                                              &lt;option value="02"&gt;February&lt;/option&gt;
                                                              &lt;option value="03"&gt;March&lt;/option&gt;
                                                              &lt;option value="04"&gt;April&lt;/option&gt;
                                                              &lt;option value="05"&gt;May&lt;/option&gt;
                                                              &lt;option value="06"&gt;June&lt;/option&gt;
                                                              &lt;option value="07"&gt;July&lt;/option&gt;
                                                              &lt;option value="08"&gt;August&lt;/option&gt;
                                                              &lt;option value="09"&gt;September&lt;/option&gt;
                                                              &lt;option value="10"&gt;October&lt;/option&gt;
                                                              &lt;option value="11"&gt;November&lt;/option&gt;
                                                              &lt;option value="12"&gt;December&lt;/option&gt;
                                                          &lt;/select&gt;
                                                      &lt;/div&gt;
                                                  &lt;/div&gt;
                                                  &lt;div class="inline pull-left m-r"&gt;
                                                      &lt;div style="height:30px"&gt;
                                                          &lt;select class="selectpicker" id="expiry_year" name="expiry_year"&gt;
                                                              &lt;option selected&gt;Select Year&lt;/option&gt;
                                                              &lt;option value="2012"&gt;2012&lt;/option&gt;
                                                              &lt;option value="2013"&gt;2013&lt;/option&gt;
                                                              &lt;option value="2014"&gt;2014&lt;/option&gt;
                                                              &lt;option value="2015"&gt;2015&lt;/option&gt;
                                                              &lt;option value="2016"&gt;2016&lt;/option&gt;
                                                              &lt;option value="2017"&gt;2017&lt;/option&gt;
                                                              &lt;option value="2018"&gt;2018&lt;/option&gt;
                                                              &lt;option value="2019"&gt;2019&lt;/option&gt;
                                                              &lt;option value="2020"&gt;2020&lt;/option&gt;
                                                              &lt;option value="2021"&gt;2021&lt;/option&gt;
                                                              &lt;option value="2022"&gt;2022&lt;/option&gt;
                                                              &lt;option value="2023"&gt;2023&lt;/option&gt;
                                                              &lt;option value="2024"&gt;2024&lt;/option&gt;
                                                              &lt;option value="2025"&gt;2025&lt;/option&gt;
                                                              &lt;option value="2026"&gt;2026&lt;/option&gt;
                                                              &lt;option value="2027"&gt;2027&lt;/option&gt;
                                                              &lt;option value="2028"&gt;2028&lt;/option&gt;
                                                              &lt;option value="2029"&gt;2029&lt;/option&gt;
                                                              &lt;option value="2030"&gt;2030&lt;/option&gt;
                                                              &lt;option value="2031"&gt;2031&lt;/option&gt;
                                                              &lt;option value="2032"&gt;2032&lt;/option&gt;
                                                              &lt;option value="2033"&gt;2033&lt;/option&gt;
                                                              &lt;option value="2034"&gt;2034&lt;/option&gt;
                                                              &lt;option value="2035"&gt;2035&lt;/option&gt;
                                                              &lt;option value="2036"&gt;2036&lt;/option&gt;
                                                          &lt;/select&gt;
                                                      &lt;/div&gt;
                                                  &lt;/div&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;
                                          &lt;div class="form-group"&gt;
                                              &lt;label class="control-label"&gt;Amount&lt;/label&gt;
                                              &lt;input type="text" name="amount" id="amount" placeholder="100.00" class="form-control"&gt;
                                          &lt;/div&gt;
                                          &lt;div class="form-group"&gt;
                                              &lt;label class="control-label"&gt;Name on card&lt;/label&gt;
                                              &lt;input type="text" name="name_on_card" id="name_on_card" placeholder="Enter name as on card" class="form-control"&gt;
                                          &lt;/div&gt;
                                          &lt;div class="form-group"&gt;
                                              &lt;label class="control-label"&gt;Email&lt;/label&gt;
                                              &lt;input type="text" name="email" id="email" placeholder="Enter your Email" class="form-control"&gt;
                                          &lt;/div&gt;
                                          &lt;div class="form-group"&gt;
                                              &lt;label class="control-label"&gt;Mobile Number&lt;/label&gt;
                                              &lt;input type="text" name="mobileNo" id="mobileNo" placeholder="Enter your mobile number" class="form-control"&gt;
                                          &lt;/div&gt;
                                          &lt;div class="form-group"&gt;
                                              &lt;input type="hidden" name="merchant_id"&gt;
                                              &lt;input type="hidden" name="customerReferenceNo"&gt;
                                              &lt;input type="hidden" name="selectedRadioValue" class="selectedRadioValue"&gt;
                                          &lt;/div&gt;
                                          &lt;div style="margin-left:35%"&gt;
                                              &lt;button type="submit" id="btn_process" name="btn_process" class="btn btn-info tokenex_submit"&gt;Pay Now&lt;/button&gt;
                                          &lt;/div&gt;
                                          &lt;div class="line line-dashed"&gt;&lt;/div&gt;
                                          &lt;div&gt;
                                              &lt;div style="float:left;margin-right:7%;"&gt;
                                                  &lt;img src="http://www.fethr.com/webapp/images/lock.png"&gt;
                                              &lt;/div&gt;
                                              &lt;p style="display:inline;"&gt;&lt;small&gt;Your card details are secured via 128 bit encryption&lt;/small&gt;
                                              &lt;/p&gt;
                                          &lt;/div&gt;
                                      &lt;/form&gt;
                                  &lt;/div&gt;
                                  &lt;div class="tab-pane" id="messages"&gt;&lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/section&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/section&gt;
          &lt;script src="js/jquery.min.js"&gt;&lt;/script&gt;
          &lt;!-- Bootstrap --&gt;
          &lt;script src="js/bootstrap.js"&gt;&lt;/script&gt;
          &lt;!-- App --&gt;
          &lt;!-- Fuelux --&gt;
          &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="js/bootstrap-select.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
              $(document).ready(function() {
                  $('.selectpicker').selectpicker({
                      style: 'btn btn-white btn-sm'
                  });
              });
          &lt;/script&gt;
          &lt;script type="text/javascript" src="https://api.toke.com/inpage/js/tokenex-client.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
              $(function() {
                  $('button').on('click', function() {
                      if ($("#cc").hasClass("active")) {
                          $('.selectedRadioValue').val('radio1');
                      } else if ($("#db").hasClass("active")) {
                          $('.selectedRadioValue').val('radio2');
                      }
                  });
              });
          &lt;/script&gt;
          &lt;script type="text/javascript" charset="utf-8"&gt;
              $('#ccType').change(function() {
                  if ($(this).val() == 'maestro') $('#cvv').closest('.name').hide();
                  else $('#cvv').closest('.name').show();
              });
          &lt;/script&gt;
          &lt;script src="js/cardvalidation.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>