JSFiddle - React, Tailwind, and code Playground

HTML

</head>
<body>
  <input type="text" style="width: 200px" id="code" name="code" />
<input id = "btnSubmit" type="submit" value="Submit"/>
    
<P>Scanned Expected</P>  
<table id = "scannedExp" > <thead>
            <tr>
                <th>Code</th>
                <th>Desc</th>
                <th>Qty</th>
                <th>Cage</th>

            </tr>
        </thead>
    <tbody>
    
    </tbody>
</table>
<P>Scanned Un Expected</P>   
<table id = "scannedUnExp" > <thead>
            <tr>
                <th>Code</th>
                <th>Desc</th>
                <th>Qty</th>
                <th>Cage</th>

            </tr>
        </thead>
    <tbody>
    
    </tbody>
</table>
    <P>Data Expected</P>
    <table id = "expected"> <thead>
            <tr>
                <th>Code</th>
                <th>Desc</th>
                <th>Qty</th>
                <th>Cage</th>

            </tr>
        </thead>
    <tbody>
        <tr id="4444" >
            <td>4444</td>
            <th>Car Door</th>
            <td>3</td>
            <th>S2222</th>
        </tr>
        <tr id="5555" >
            <td>5555</td>
            <th>door handel</th>
            <td>1</td>
            <th>S2222</th>

        </tr>
        <tr id="6666" >
            <td>6666</td>
            <th>headlight</th>
            <td>2</td>
            <th>S2222</th>

        </tr>
        <tr id="7777">
            <td>7777</td>
            <th>seat</th>
            <td>5</td>
            <th>S2222</th>

        </tr>
    </tbody>
</table>
    
  
</body>


</html>

JavaScript

$(window).load(function(){
$("#btnSubmit").on("click", function(){
    numRows = $("#expected tr").length; //loop thought expected data
    for(var i=1 ; i<numRows ; i++){ 
        var code = $("#expected tr:nth-child(" + i + ") td:nth-child(1)").html();
        var desc = $("#expected tr:nth-child(" + i + ") td:nth-child(2)").html();
        var qty = $("#expected tr:nth-child(" + i + ") td:nth-child(3)").html();
        var cage = $("#expected tr:nth-child(" + i + ") td:nth-child(4)").html();
        
        
            // if code is in expected data -1 from qty col
            if(code == $("#code").val()){    
            $("#expected tr:nth-child(" + i + ") td:nth-child(3)").html(parseInt(qty) - 1);
            
            //delete if last one in expected table
            if(qty ==1 ){$("#" + code).remove();} 
                
            
            // loop thought scanned expected table
            numRowsB = $("#scannedExp tr").length; 
            for(var ib=1 ; ib<numRows ; ib++){   
            var codeExp = $("#scannedExp tr:nth-child(" + ib + ") td:nth-child(1)").html();
            var qtyExp = $("#scannedExp tr:nth-child(" + ib + ") td:nth-child(3)").html();    
    
            // if in scannedExp add qty by one
            if(codeExp == $("#code").val()){   
            $("#scannedExp tr:nth-child(" + ib + ") td:nth-child(3)").html(parseInt(qtyExp) + 1);
            return true;
            }
            
            else{ //if not found in expected table add row to scannedExp
            $("#scannedExp tbody").append("<tr><td>" + $("#code").val() + "</td><td>" + desc + "</td><td>1</td><td>" + cage + "</td></tr>");
            return true;
            }
            } 
            return true;
            }
            else{
            alert("not in expected");
            }
            

}})
});