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>

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);
      
    }
    
  }

});