JSFiddle - React, Tailwind, and code Playground

by WebDev93

HTML

<div class="data-table">
  <div class="data-table-item" sign="<" val="10000" result="1"></div>
  <div class="data-table-item" sign=">=" val="10000" result="2"></div>
  <div class="data-table-item" sign=">=" val="25000" result="3"></div>
  <div class="data-table-item" sign=">=" val="50000" result="4"></div>
</div>

<input type="text" class="field">
<p class="btn">Submit</p>

<div><span>User Value: </span><span class="val"></span></div>

JavaScript

$(document).ready(function(){  
  var arr = [];
  $('.data-table-item').each(function(){
    var a = $(this).attr("val");
    arr.push(a);
  });
  
  $('.btn').click(function(){
    $('.val').text($('.field').val());

    var f3 = Number($('.field').val());

    for(let i=0; i<=arr.length; i++){
      //console.log(Number(arr[i]));
      if(f3 < Number(arr[1])){
        alert("Less Than " + arr[i]);
        return false;
      }
      else if(f3 >= Number(arr[i]) && (f3 <= Number(arr[i+1]))){
        alert("Between " + arr[i] + " and " + arr[i+1]);
        return false;
      }
      else if(f3 >= Number(arr[arr.length - 1])){
        alert("Greater Than " + arr[arr.length - 1]);
        return false;
      }
    }
  });
});