JS Reads one value, but not another

Hi Experts,

I have 2 textboxes as follows

            <div class="divDetailDivs">
                
                <label for="txtPickupDate" id="lblPickupDate" class="required detailControls">
                    Pickup Date:
                </label>
                
                <br>
                
                <input type="text" id="txtPickupDate" name="txtPickupDate" class="required detailControls"
                       maxlength="10" value="<?php echo $errand['pickup_date']; ?>">
                
            </div>

            <div class="divDetailDivs">
                
                <label for="txtReservID" id="txtReservID" class="detailControls">
                    txtReservID:
                </label>
                
                <br>
                
                <input type="text" id="txtReservID" name="txtReservID" class="detailControls"
                       value="<?php echo $errand['id']; ?>">
                
            </div>    
        

Select allOpen in new window

When I try to read the value from the first it works, but it does not in the second

var conf = document.getElementById('txtPickupDate').value; //Returns a value
var conf = document.getElementById('txtReservID').value; //Returns 'Undefined'

Select allOpen in new window

I do not get any errors.

Can anyone see why this is happening?