Jquery barcode scanner

In my HTML file is use Jquery scannerDetection. My problem is that if i select an input field the scanner writes to that input (cardnameinput) instead of the dedicated one (cardidinput). If i deselect everything the scanner inputs in the right field.

<input type="text" id="cardnameinput" class="k-textbox" style="width: 100%;"/>
<input type="text" id="cardidinput" class="k-textbox k-state-disabled" style="width: 
    100%;"/>

$(function () {
     $(window).scannerDetection({
         timeBeforeScanTest: 100, // wait for the next character for upto 200ms
         startChar: [188], // prefix character to start listening
         endChar: ["?".charCodeAt(0)], // suffix character eg end of scanning. We can not get the character code for "?" reliably, hence the use of "charCodeAt"
         avgTimeByChar: 45, // it's not a barcode if a character takes longer than 40ms
         ignoreIfFocusOn: "input",
         minLength: 4,
     });

     $(window).bind("scannerDetectionComplete", function (e, data) {
         console.log("Card succesfully scanned " + data.string);
         $("#cardidinput").val(data.string);
     }).bind("scannerDetectionError", function (e, data) {
         console.log("Error reading card " + data.string);
     });

     $("#siteDropDown").change(function () {
         var departmentComboBox = $("#departmentComboBox").data("kendoComboBox");
         departmentComboBox.dataSource.read();
         departmentComboBox.value("");
     });

     $("#createGuestCardButton").on("click", function (e) {
         e.preventDefault();
         checkGuestCard();
     });
 });