Understanding how to use asynchronous functions in Javascript - counts and timers?

Question

I'm trying to make a small page that runs a survey. I'd like the survey to be repeatable within the page, but the user needs to enter a login name when they enter the page. I'm attempting to write code such that they fill out the login, and then the survey begins. I'm trying to have a JSON that feeds in 100+ random images, sending in a new one each time the user completes the survey application.

So, whats happening is every time the start function is called, the survey function runs. However, it only runs for around 1 second, rather than the continuous running I'd like to have. When I've played with the ordering of the page and added timers, I've managed to get it such that the survey runs a single time but does not reset itself upon completion. It also doesn't seem to be picking up variables from the other function - I wanted the "count" variable to increase as the survey is repeatedly completed. It also isn't picking up the username variable, which is created inside of the outside "start" function.

I think my problem here has to do with not understanding how functions and variables are supposed to be nested inside of each other, and with how asynchronicity works in Javascript. Can anyone point me in the right direction? Here's a JSfiddle for the problem, and a code snippit:

//button Login
function serv (){

      Survey
          .StylesManager
          .applyTheme("modern");

          window.survey = new Survey.Model(json);

              survey
                  .onComplete
                  .add(function (result) {
                      count ++;
                      var PID = username;
                      var results = PID + "|||" + (keyname) + ":\n" + JSON.stringify(result.data, null, 3) + (count) ;
                      document
                          .querySelector('#surveyResult')
                          .textContent = results;
                  survey.clear();
                  survey.render();
                  });

              $("#surveyElement").Survey({model: survey});
      }

function start() {
    var username = document.getElementById("user_PID").value;
    alert("your PID is " + username);
    modal.style.display = "none";
    serv();
    }

var knlist = {}

var count = 13

var knx = ("kn" + count)

var keyname = (knlist[knx])

var mapilink = "https://images.mapillary.com/" + (keyname) + "/thumb-1024.jpg";

var json = {}

var modal = document.getElementById('id01');