More effective approach: bind

<input type="number" id="Testing1" value="0"><span class="ClickHoldChangeNumber" id="MouseDragSpace1"><table><tr><td style="width:1000; height:100; border-width:1px; border: 1px solid black;"></td></tr></table></span><br><br>
<input type="number" id="Testing2" value="0"><span class="ClickHoldChangeNumber" id="MouseDragSpace2"><table><tr><td style="width:1000; height:100; border-width:1px; border: 1px solid black;"></td></tr></table></span><br><br>


<span id="MousePos"></span>
<span id="DeltaDrag"></span>
<span id="IncrementDecrement"></span>
<span id="SourcePosition"></span>
<script>
    //Initializing variables
        DragOriginX = 0
        DragOriginY = 0
        WhichElement = ""
        ClickHoldChangeNumberClasses = document.getElementsByClassName("ClickHoldChangeNumber")
    window.onload=function(){
        SourcePosition = 0
        MouseState = ""
        let thingy = ""
        //ClickHoldChangeNumberClasses = document.getElementsByClassName("ClickHoldChangeNumber")
        //addEventListener is specific to each element, so we loop to add for each class.
            let IndexVal = 0
            while (IndexVal < ClickHoldChangeNumberClasses.length) {
                thingy = ClickHoldChangeNumberClasses[IndexVal].id
                ClickHoldChangeNumberClasses[IndexVal].addEventListener('mousedown', setDragOrigin.bind(event, ClickHoldChangeNumberClasses[IndexVal].id))
                IndexVal++
            }
        document.addEventListener('mouseup', doneWithDragOrigin);
        document.addEventListener('mousemove', captureKey);
        
    }
    function captureKey(e) {
        if (MouseState != "PressedDown") {
            DragOriginX = e.clientX
            DragOriginY = e.clientY
        }
        document.getElementById("MousePos").innerHTML = "Mouse position: (" + DragOriginX.toString(10) + ", " + DragOriginY.toString(10) + ")<br>"
        document.getElementById("DeltaDrag").innerHTML = "Delta from mouse position: (" + (e.clientX - DragOriginX).toString(10) + ", " + (e.clientY - DragOriginY).toString(10) + ")<br>"
        if (MouseState == "PressedDown") {
            SubFunctionVariable = [e.clientX, e.clientY]
            moveIncreaseDecrease()
        }
    }
    function moveIncreaseDecrease() {
        if (WhichElement == "MouseDragSpace1") {
            document.getElementById("Testing1").value = (SourcePosition + (SubFunctionVariable[0] - DragOriginX)).toString(10)
        } else {
            document.getElementById("Testing2").value = (SourcePosition + (SubFunctionVariable[0] - DragOriginX)).toString(10)
        }
    }
    function setDragOrigin(ElementID) {
        WhichElement = ElementID
        MouseState = "PressedDown"
        //SourcePosition = parseInt(document.getElementById(WhichElement).value)
        if (WhichElement == "MouseDragSpace1") {
            SourcePosition = parseInt(document.getElementById("Testing1").value)
        } else {
            SourcePosition = parseInt(document.getElementById("Testing2").value)
        }
    }
    function doneWithDragOrigin() {
        //SourcePosition = parseInt(document.getElementById("Testing1").value)
        
        MouseState = "Released"
    }
</script>

This is still a work in progress. The intention is to simplify the process of adding more number inputs without requiring code modifications using this JavaScript system.

A recent update with improved revisions has finally resolved the selection issue that was disrupting the system. Previously, the problem caused the system to ignore the first mouseup event, leaving it in a constant "drag" state even after the user released the left mouse button. Updates now allow for the addition of more HTML tags with this behavior without requiring any edits to the JS code:

<h1 style="">Enhanced number adjuster inspired by Unity</h1>

<p>Simply click and hold the left mouse button over &ldquo;Value 1/2/3&rdquo; then move your mouse left or right to adjust values in the input boxes</p>

<span class="ClickHoldChangeNumber" id="NumbInput_Testing1">Value 1:</span> <input type="number" id="Testing1" value="0"><br>
<span class="ClickHoldChangeNumber" id="NumbInput_Testing2">Value 2:</span> <input type="number" id="Testing2" value="0"><br>
<span class="ClickHoldChangeNumber" id="NumbInput_Testing3">Value 3:</span> <input type="number" id="Testing3" value="0"><br>

<span id="MousePos"></span>
<span id="DeltaDrag"></span>
<span id="IncrementDecrement"></span>
<span id="SourcePosition"></span>
<script>
//Initialize variables
        MouseDragOriginX = 0
        MouseDragOriginY = 0
        WhichElement = ""
        ClickHoldChangeNumberClasses = document.getElementsByClassName("ClickHoldChangeNumber")
//Attach listeners
    window.onload=function(){
        SourcePosition = 0
        MouseState = ""
        let thing = ""
            let Index = 0
            while (Index < ClickHoldChangeNumberClasses.length) {
                thing = ClickHoldChangeNumberClasses[Index].id
                ClickHoldChangeNumberClasses[Index].addEventListener('mousedown', PlaceDragOriginPos.bind(event, ClickHoldChangeNumberClasses[Index].id))
                Index++
            }
        document.addEventListener('mouseup', ExitPlaceDragOriginPos);
        document.addEventListener('mousemove', logKey);
        
    }
    function logKey(e) {
        if (MouseState != "PressedDown") {
            MouseDragOriginX = e.clientX
            MouseDragOriginY = e.clientY
        }
        document.getElementById("MousePos").innerHTML = "Mouse position: (" + MouseDragOriginX.toString(10) + ", " + MouseDragOriginY.toString(10) + ")<br>"
        document.getElementById("DeltaDrag").innerHTML = "Delta from mouse position: (" + (e.clientX - MouseDragOriginX).toString(10) + ", " + (e.clientY - MouseDragOriginY).toString(10) + ")<br>"
        if (MouseState == "PressedDown") {
            SubFunctionVariable = [e.clientX, e.clientY]
            MouseMoveIncreaseDecrease()
        }
    }
//Handling mouse key press
    function PlaceDragOriginPos(ElementID) {
        WhichElement = ElementID
        MouseState = "PressedDown"
            SourcePosition = parseInt(document.getElementById(WhichElement.substring((WhichElement.search(/_/) + 1), WhichElement.search(/$/))).value)
            if (window.getSelection) {
                if (window.getSelection().empty) {  
                    window.getSelection().empty();
                } else if (window.getSelection().removeAllRanges) {  
                    window.getSelection().removeAllRanges();
                }
            } else if (document.selection) {  
                document.selection.empty();
            }
    }
//Adjusting numbers in the input box while dragging
    function MouseMoveIncreaseDecrease() {
        document.getElementById(WhichElement.substring((WhichElement.search(/_/) + 1), WhichElement.search(/$/))).value = (SourcePosition + (SubFunctionVariable[0] - MouseDragOriginX)).toString(10)
    }
    function ExitPlaceDragOriginPos() {
        MouseState = "Released"
    }
</script>

It appears that the Index is set to 2 after the window.onload function executes the while loop. The event handler is then attached to the element being sought, allowing the use of 'this'.

ClickHoldChangeNumberClasses[Index].addEventListener('mousedown', function(){
    PlaceDragOriginPos(this.id);
});

UPDATE: I have made a new suggestion by replacing input ids with a class (ChangeNumber) and attaching a single event handler to document.body for event delegation. This way, you can identify which element was clicked by examining the event.target and take action only on input.ChangeNumber elements.

The Setting SourcePosition, DragOriginX, and DragOriginY has been relocated to the mousedown event, and logKey now checks if the left mouse button is down, eliminating the need for MouseState, MouseMoveIncreaseDecrease, and ExitPlaceDragOriginPos.

This solution allows for seamless addition of more 'ChangeNumber' elements without requiring any changes to the script.

<h1 style="">Unity-styled number adjuster</h1>
<p>Press and hold down the left mouse button over &ldquo;Value 1/2/3&rdquo; and move your mouse left or right to adjust the value in the input boxes</p>
<span>Value 1:</span> <input type="number" class="ChangeNumber" value="0"><br>
<span>Value 2:</span> <input type="number" class="ChangeNumber" value="0"><br>
<span>Value 3:</span> <input type="number" class="ChangeNumber" value="0"><br>
<span id="MousePos"></span>
<span id="DeltaDrag"></span>
<span id="IncrementDecrement"></span>
<span id="SourcePosition"></span>
<script>
    DragOriginX = 0;
    DragOriginY = 0;
    SourcePosition = 0;
    WhichElement = null;
    window.onload=function(){
        // Delegate a single event handler to handle all ChangeNumber
        document.body.addEventListener('mousedown', function(e){
            WhichElement = e.target.closest('.ChangeNumber');
            if (WhichElement) { // Clicked on a input.ChangeNumber?
                SourcePosition = parseInt(WhichElement.value);
                DragOriginX = e.clientX;
                DragOriginY = e.clientY;
            }
        });
        document.body.addEventListener('mousemove', logKey);        
    }
    function logKey(e) {
        document.getElementById("MousePos").innerHTML = "Mouse position: (" + DragOriginX.toString(10) + ", " + DragOriginY.toString(10) + ")<br>"
        document.getElementById("DeltaDrag").innerHTML = "Delta from mouse position: (" + (e.clientX - DragOriginX).toString(10) + ", " + (e.clientY - DragOriginY).toString(10) + ")<br>"
        if (e.buttons == 1 && WhichElement) { // 1: Left Mouse Button
            WhichElement.value = (SourcePosition + (e.clientX - DragOriginX)).toString(10)
        }
    }
</script>