JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<input name="scan" type="text" autocomplete="off" placeholder="Tracking Number" autofocus />
<br />
<input class="custom-control-input" type="checkbox" id="111" />
<label for="111" class="custom-control-label">111</label>
<br />
<input class="custom-control-input" type="checkbox" id="222" />
<label for="222" class="custom-control-label">222</label>
<br />
<input class="custom-control-input" type="checkbox" id="333" />
<label for="333" class="custom-control-label">333</label>
<br />
<input class="custom-control-input" type="checkbox" id="444" />
<label for="444" class="custom-control-label">444</label>
<br />
<input class="custom-control-input" type="checkbox" id="555" />
<label for="555" class="custom-control-label">555</label>
<div class="alert">Not found</div>

CSS

.alert {
  position: fixed;
  top: 10px;
  right: 10px;
  background: red;
  padding: .25rem .5rem;
  opacity: 0;
  transition: all .5s ease;
}

.alert.active {
  opacity: 1
}

JavaScript

// create input ids array
let input_ids = [];

$('.custom-control-input').each(function() {

  // get the input id
  let input_id = $(this).attr('id');

  // add input id to array
  input_ids.push(input_id);
  
});

// input change in doc with name scan
$(document).on('input', '[name="scan"]', function(e) {

  // the scan current input val
  let val = e.target.value;

  // if val exist in input ids array
  if( $.inArray(val, input_ids) >= 0 ) {
  
    // get this input by id
    let $input = $('#' + e.target.value);
    
    // if input is checked
    if($input.prop('checked')) {
      
      // uncheck input
      $input.prop('checked', false);
    
    } else {
    
      // else check input
      $input.prop('checked', true);
      
    }
    
  } else {
  
    // alert not found
    alert(e);
  
  }

});

// not found alert
function alert(e) {

  // activate alert class
  $('.alert').addClass('active');
  
  // time out to hide
  setTimeout(function () {
  
    // remove class
    $('.alert').removeClass('active');
    
  }, 1000)

}