¿Cómo cambiar el elemento de texto basado en el campo de texto de entrada en HTML usando Javascript?

Aquí hay una copia de mi código en:https://jsfiddle.net/5zLyyv94/

<h1 class="login-heading">
<a href="./index.html" class="lnk2">Join</a> us, 
<span id="initname">Luke</span>.</h1>
<form method="post">
<input type="text" name="first name" placeholder="First Name" required="required" class="input-txt" />
</form>

Básicamente, estoy tratando de cambiar el nombre de Luke a lo que sea que la persona escriba en el texto del campo para el primer nombre.

digamos, escriben su primer nombre como "Jason"

Quiero que el texto de extensión para Luke cambie de Luke a Jason.

¡Gracias por adelantado!

Respuestas a la pregunta(2)

Su respuesta a la pregunta