I am creating a very basic simulated chat bot/dialogue tree. I have the whole conversation mapped based on what a user selects. However, I am doing this by storing all of the conversation in append() functions in javascript. Which, no doubt makes this a pretty clunky experience.

In each 'question' the bot asks, I need to:

1. Append the value of the button a user clicks (to simulate chat)
2. Remove the chat controls
3. Append the bot's response
4. Append a follow up question
5. Append the new question's chat controls

Which, is undoubtably a little much. This is what an average question/response function looks like:

$(".chat-controls").on("click", ".options.one", function() {
    input2 = $(this).text();
    $(".one").remove();

    if (input2 == "Nope, never heard, tell me more!") {
      //explanation
      $(".main-content").append(
        '<div class="user-dialog">' + input2 + "</div>"
      );
      $(".main-content").append(
        '<div class="dialog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a justo non nunc ultrices lacinia sit amet vel lorem. Aenean eget lobortis purus, a dictum justo.</div>'
      );
      $(".main-content").append(
        '<div class="dialog">Phasellus aliquet tellus ac molestie elementum. Fusce dapibus augue et lectus aliquet maximus. Maecenas feugiat tortor elit, eu imperdiet lectus cursus at.</div>'
      );

      $(".main-content").append(
        '<div class="dialog">Well ' +
        username +
        ", Maecenas feugiat tortor elit, eu imperdiet lectus cursus at?</div>"
      );
    } else {
      $(".main-content").append(
        '<div class="user-dialog">' + input2 + "</div>"
      );
      //questions

      $(".main-content").append(
        '<div class="dialog">Well ' +
        username +
        ", Maecenas feugiat tortor elit, eu imperdiet lectus cursus at?</div>"
      );
    }

    $(".chat-controls").append(
      '<button class="options two" type="button">I LOVE THEM</button>'
    );
    $(".chat-controls").append(
      '<button class="options two" type="button">They\'re alright, I guess</button>'
    );
    $(".chat-controls").append(
      '<button class="options two" type="button">Not a fan at all!</button>'
    );
  });

What ways could I optimize this? Making it easy to read while working on the JS and easy to add new steps. Here is a JSFiddle of the whole javascript.