/**
 * Add a character line.
 */
function addCharacter() {
	const addChar = document.querySelectorAll( '[id^="add-tmp-char-"]' );

	// Loop through added character inputs.
	for ( const tmpCharButton of addChar ) {
		// Add a click handler for this particular input.
		tmpCharButton.addEventListener( 'click', () => {
			const id = getId( tmpCharButton );
			const thisItem = document.getElementById( `character-${id}` )
			const charInput = document.getElementById( `addChar-${id}` );
			const charName = charInput ? charInput.value : false;
			const dexInput = document.getElementById( `charDex-${id}` );
			const dexVal = dexInput ? dexInput.value : false;

			if ( charName && charName !== 'undefined' && charName !== '' ) {
				// Remove the old input and button.
				charInput.remove();

				// Only remove the add button if we have a Dex value.
				if ( dexVal !== 'undefined' && dexVal !== '' ) {
					tmpCharButton.remove();
				} else {
					// We still need to add the dex. Change the button value to indicate that a Dex score is still needed.
					const buttonTxt = `${tmpCharButton.textContent} Dex`;
					tmpCharButton.textContent = buttonTxt;
				}

				charSpan = document.createElement('span');
				charSpan.setAttribute( 'id', `addChar-${id}` );
				charSpan.classList.add('character-name');
				charSpan.textContent = charName;
				thisItem.appendChild( charSpan );
			}

			if ( dexVal && dexVal !== 'undefined' && dexVal !== '' ) {
				// Remove the old input and button.
				dexInput.remove();

				// Only remove the add button if we have a character name.
				if ( charName !== 'undefined' && charName !== '' ) {
					tmpCharButton.remove();
				} else {
					// We still need to add the character name. Change the button value to indicate that a name is still needed.
					const buttonTxt = `${tmpCharButton.textContent} Name`;
					tmpCharButton.textContent = buttonTxt;
				}

				dexSpan = document.createElement('span');
				dexSpan.setAttribute( 'id', `charDex-${id}` );
				dexSpan.classList.add('character-init-bonus');
				dexSpan.textContent = `Initiative Bonus: ${getModifier( dexVal )}`;
				thisItem.appendChild( dexSpan );
			}
		} );
	}
}