title: jQuery - Changing CSS from Array on keyup
body: <p>Each time I click a radio, the <code>.tag</code> div receives the <code>data-color</code> of the corresponding radio.</p>
  <p>How do I apply the same principle to <code>input type=&quot;text&quot;</code> where each radio value <code>data-color</code> is put into an <code>array</code> and the <code>background-color</code> of the <code>.tag</code> changes based on the value of the input entered on <code>keyup</code>?</p>
  <p>I need the array to be in a <code>range</code> for example if the value is between $25-$49 return the data-color of the radio where value=&quot;25&quot; since the next radio value=&quot;50&quot; and if typed, would return the data-color for the valu=&quot;50&quot; radio.</p>
  <p><strong>For example</strong>:</p>
  <pre><code>    (&quot;0-5&quot;   -&gt; data-color of first radio) 
  
      (&quot;6-25&quot;  -&gt; data-color of second radio)  
      
      (&quot;26-50&quot; -&gt; data-color of third radio) 
  
      (&quot;26-50&quot; -&gt; data-color of fourth radio) 
      
      (&quot;100+&quot; -&gt; custom background-color)
  </code></pre>
  <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() {
    $("#donation").keyup(function() {
      $("input:radio[name=donation]").each(function() {
        $(this).prop("checked", false);
      });
    });
    $('input[name="donation"]').on("change", function() {
      var color = $(this).attr("data-color");
      $(".tag").css("background-color", color);
      $("#donation").closest("div").removeClass("donation--active");
      $("#donation").val(
        this.checked ?
        this.value :
        $('input[name="donation"][name="' + this.name + '"]:checked').val()
      );
    });
    $('input[name="donation"]').trigger("change");
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  ::-webkit-input-placeholder {
    color: #b6b6b6;
  }
  
  :-moz-placeholder {
    color: #b6b6b6;
    opacity: 1;
  }
  
  ::-moz-placeholder {
    color: #b6b6b6;
    opacity: 1;
  }
  
  :-ms-input-placeholder {
    color: #b6b6b6;
  }
  
  ::-ms-input-placeholder {
    color: #b6b6b6;
  }
  
  ::placeholder {
    color: #b6b6b6;
  }
  
  body {
    background: #fff;
    width: 100%;
    margin: auto;
    padding: 30px;
    min-width: 320px;
    max-width: 540px;
    border-radius: 3px;
  }
  
  .inline-radio {
    font-size: 19px;
    display: -webkit-box;
    display: flex;
    border-radius: 3px;
  }
  
  .inline-radio div {
    border: 1px solid #ededed;
    margin-top: -1px;
    margin-left: -1px;
    position: relative;
    -webkit-box-flex: 1;
    flex: 1;
  }
  
  .inline-radio div:last-child {
    color: #b6b6b6;
    padding: 0 0.9rem;
    display: flex;
    align-items: center;
  }
  
  .inline-radio input[type="radio"] {
    cursor: pointer;
    width: 100%;
    height: 60px;
    opacity: 0;
  }
  
  .inline-radio input[type="text"] {
    color: #b6b6b6;
    font-size: inherit;
    margin-left: 0.3rem;
    display: flex;
    border: none;
    outline: none;
    background: #0000ff00
  }
  
  .inline-radio label {
    position: absolute;
    top: 0;
    left: 0;
    color: #b6b6b6;
    width: 100%;
    height: 100%;
    background: #fff;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    pointer-events: none;
  }
  
  .inline-radio input:checked+label {
    border: 2px solid
  }
  
  .tag {
    height: 120px;
    width: 200px;
    border: 2px solid
  }
  
  input#donation {
    border: 3px solid;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="inline-radio"&gt;
    &lt;div&gt;&lt;input type="radio" data-color="blue" value="5" name="donation"&gt;&lt;label&gt;$5&lt;/label&gt;&lt;/div&gt;
    &lt;div&gt;&lt;input type="radio" data-color="orange" value="25" name="donation" checked&gt;&lt;label&gt;$25&lt;/label&gt;&lt;/div&gt;
    &lt;div&gt;&lt;input type="radio" data-color="green" value="50" name="donation"&gt;&lt;label&gt;$50&lt;/label&gt;&lt;/div&gt;
    &lt;div&gt;&lt;input type="radio" data-color="red" value="100" name="donation"&gt;&lt;label&gt;$100&lt;/label&gt;&lt;/div&gt;
    &lt;div&gt;&lt;span&gt;$&lt;/span&gt;&lt;input id="donation" value="" name="donation" type="text"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="tag"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>