in the template.html

<script>
{% block js %}
  $(document).ready(function (e) {
    var subjects = {{ subjects|safe }};
    var whats = {{ whats|safe }};
    var wheres = {{ wheres|safe }};
    var extras = {{ extras|safe }};

    function generateEvents() {
      var events_html = '';
      for (var i = 0; i < 10; i++) {
        events_html += '<div class="event">';
        var choice = subjects[Math.floor(Math.random() * subjects.length)] + " ";
        choice += whats[Math.floor(Math.random() * whats.length)] + " ";
        choice += wheres[Math.floor(Math.random() * wheres.length)];
        if (Math.random() >= 0.5) {
          choice += ", " + extras[Math.floor(Math.random() * extras.length)];
        }
        events_html += choice + "</div>";
      }

      $(".events").html(events_html);
    }

    generateEvents();

    $("#more-events").click(function (e) {
      generateEvents();
    });
  });
{% endblock js %}
</script>