title: Change border color depend values
body: <p>I have couple of div and textbox. I want to change div border color. It's depend textbox values. But textboxes are sometimes increases sometimes decreases they are not a certain number</p>
  
  <p>I tried this but doesn't work</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
  var val=document.getElementById('a').value;
  if(val==25){
  $(".b").parent().css({"color": "red", "border": "2px solid yellow"});
  }
  else if(val==50){
  $(".b").parent().css({"color": "black", "border": "2px solid red"});
  }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.abc { 
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  
  &lt;/style&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body class="container"&gt;
    &lt;div  class="abc"&gt;
          &lt;input type="text" class="b" value="25" id="a"/&gt;
    &lt;/div&gt;
    &lt;div class="abc"&gt;
          &lt;input type="text" class="b" value="50" id="a"/&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How can I do this ?</p>