I don't know why but when I use document.forms.elements.value on a set of nodes, the second time around, on the first time, it always returns undefined.

player identifier iterates through like it's supposed to be doing...

player_total_1
player_total_2
player_total_3
player_total_4
player_total_5
player_total_1
player_total_2
player_total_3
player_total_4

but when it gets to the second for loop....trying to get the player_total_'playerNumber' form element returns undefined and teh script breaks.

This is boggling my mind, thank you for any help.

function that produces the error

function updatePlayerTotal(playerNumber, cardValue)
{
    
    
    // get player div
    player_identifier = 'player_total_'+playerNumber;

    document.getElementById('response').innerHTML += player_identifier + "<br>";
   HERE-->UNDEFINED--> player_total = document.forms['players'].elements[player_identifier];

    
    new_total = (player_total.value + totalCardValue);
    
    document.getElementById('player_total_display_' + playerNumber).innerHTML = new_total;

    player_total.value = new_total;
    
    
    return;
    
}

calling the function

for(i = 1; i <= 5; i++)
    {
        
        // next card id
        next_id = document.getElementById('next_card');
        
        // card
        card = document.getElementById('card_' + next_id.value++);
        // count these 4 and return actual value from string
        cardValue = countCards(card);
        //to display the card they get
        cardDisplay = document.getElementById('cards_'+i);
        // not sure why
        parentDiv = document.getElementById('player_'+i);
        // put card in there
        cardDisplay.innerHTML += '<img src="' + card.value + '">';
        count = count+1;
        
        //updatePlayerTotal(playerNumber, cardValue);
        updatePlayerTotal(i, cardValue);
        
        
    }
    
    for(i = 1; i <= 4; i++)
    {
        
        // next card id
        next_id = document.getElementById('next_card');
        // card
        card = document.getElementById('card_' + next_id.value++);
        // count these 4
        cardValue = countCards(card);
        //to display the card they get
        cardDisplay = document.getElementById('cards_'+i);
        // not sure why
        parentDiv = document.getElementById('player_'+i);
        // put card in there
        cardDisplay.innerHTML += '<img src="' + card.value + '">';
        
        //updatePlayerTotal(playerNumber, cardValue);
        updatePlayerTotal(i, cardValue);
    }

and the html

<form id="players">
<div id="player=1" style="border:1px solid black;width:500px;height:100px;">
    <div id="cards_1" style="float:left;">
    </div>
    <input type="hidden" name="total" value="0">
    <input type="hidden" name="soft" value="0">
    
    <div id="player_total_display_1" style="float:right;height:50px; border-left:1px solid black;width:25px;font-size:32px;">
    0
    <input name="player_total_1" type="hidden" value="0">
    </div>
    <div id="game_options_1" style="display:none;float:right;">
    game me
    </div>
    
    <div style="clear:both;"></div>
</div>
<div id="player=2" style="border:1px solid black;width:500px;height:100px;">
    <div id="cards_2" style="float:left;">
    </div>
    <input type="hidden" name="total" value="0">
    <input type="hidden" name="soft" value="0">
    
    <div id="player_total_display_2" style="float:right;height:50px; border-left:1px solid black;width:25px;font-size:32px;">
    0
    <input name="player_total_2" type="hidden" value="0">
    </div>
    <div id="game_options_2" style="display:none;float:right;">
    game me
    </div>
    
    <div style="clear:both;"></div>
</div>
<div id="player=3" style="border:1px solid black;width:500px;height:100px;">
    <div id="cards_3" style="float:left;">
    </div>
    <input type="hidden" name="total" value="0">
    <input type="hidden" name="soft" value="0">
    
    <div id="player_total_display_3" style="float:right;height:50px; border-left:1px solid black;width:25px;font-size:32px;">
    0
    <input name="player_total_3" type="hidden" value="0">
    </div>
    <div id="game_options_3" style="display:none;float:right;">
    game me
    </div>
    
    <div style="clear:both;"></div>
</div>
<div id="player=4" style="border:1px solid black;width:500px;height:100px;">
    <div id="cards_4" style="float:left;">
    </div>
    <input type="hidden" name="total" value="0">
    <input type="hidden" name="soft" value="0">
    
    <div id="player_total_display_4" style="float:right;height:50px; border-left:1px solid black;width:25px;font-size:32px;">
    0
    <input name="player_total_4" type="hidden" value="0">
    </div>
    <div id="game_options_4" style="display:none;float:right;">
    game me
    </div>
    
    <div style="clear:both;"></div>
</div>
<br><br>
DEALER:<br>
<div id="player=5" style="border:1px solid black;width:500px;height:100px;">
    <div id="cards_5">
    </div>
    <input type="hidden" name="total" value="0">
    <input type="hidden" name="soft" value="0">
    
    <div id="player_total_display_5" style="float:right;height:50px; border-left:1px solid black;width:25px;font-size:32px;">
    0
    <input name="player_total_5" type="hidden" value="0">
    </div>
    
    <input name="dealer_card_two" type="hidden" value="">
    <div style="clear:both;"></div>
</div>

use a different variable name for one of the loops rather than "i" for them both

still returned undefined