How to show the tabs of players in the game book

Question

How to show the tabs of players in the game book

So, I'm trying to create a Gamebook that introduces players to a form, and then, when clicked, shows the text. Depending on what the player answered, the game will respond and so on. This idea has an idea: https://jsfiddle.net/MacroG0D/9g1130pm/

So below you can see that I really understand how to add text using click and append. I just can't understand how MacroG0D (in the violin) applied it to his game. Because I can’t make it work.

I also want the player name to also be shown, and this interaction. Since I cannot make it work, it seems to be foolish to write the whole game first, since I cannot check it if this does not work.

Can someone please explain how this was done in jsfiddle or are there any tips?

    $(document).ready(function() {
      $("#button").click(function() {
        var toAdd = $("input[name=checkListItem]").val();
        $(".list").append('<div class="item">' + toAdd + '</div>');
      });
    });

    h2 {
      font-family: arial;
    }

    form {
      display: inline-block;
    }

    #button {
      display: inline-block;
      height: 20px;
      width: 70px;
      background-color: #cc0000;
      font-family: arial;
      font-weight: bold;
      color: #ffffff;
      border-radius: 5px;
      text-align: center;
      margin-top: 2px;
    }

    .list {
      font-family: garamond;
      color: #cc0000;
    }

    <!DOCTYPE html>
    <html>
    <head>
      <title>Gamebook</title>
      <link rel="stylesheet" type="text/css" href="CODEC.css" />
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script type="text/javascript" src="CODEC.js"></script>
    </head>
    <body>
      <h2>The Dutch Golden Age</h2>
<p>Contains an introduction story </p>
<p>Are you ready to play the game?</p>
      <form name="checkListForm">
        <input type="text" name="checkListItem" />
      </form>
      <div id="button">Answer</div>
      <br/>
      <div class="list"></div>
    </body>
    </html>