How can the key value of an element be stored onClick?

Question

       var jobID = {};

      function gotData(data) { 
              var date = Today;

              var container = document.getElementById('pos_1'); 
              var container2 = document.getElementById('jobapp'); 

              data.forEach(function(jobSnap) { // loop over all jobs
                var key = jobSnap.key;
                var job = jobSnap.val();
                var newCard = `
                  <li class="pos-card" id="${key}">
                        <div class="content">
                          <div class="title new">${job.JobTitle}</div>
                          <div class="dept">Customer Service</div>
                          <div class="date">${date}</div>
                          <div class="refer">Apply</div>
                        </div>
                        <ul class="desc">
                          <li>${job.JobSummary}</li>
                        </ul>
                  </li>
              `;
              container.innerHTML += newCard;
               jobID.value = key;
              console.log(key);
              })
            }

The loop function above displays all the entries in a firebase database child like this with their respective firebase database key listed in right console.

what I need to do is to capture the key of the respective jobs that was clicked so that I can use it in the function below to save all the entries of the job application under the clicked key. I have tried to declare the a jobId as a global variable and then assign the key value to it but I could not use it in another function. How can I capture the key of the clicked job and then use it in another function as JobId? for example how can I use it in the function below

       function newApplication() {

      var database = firebase.database();
      var applicant_Name = document.getElementById('name').value;
      var applicant_Number = document.getElementById('phone').value; 
      var applicant_email = document.getElementById('email').value; 
      var AuthorId = firebase.auth().currentUser.uid;
      var cover_letter = document.getElementById('cover_letter').value;

      console.log(key);
       var JobId.value = key;

      var postData = {
              ApplicantName: applicant_Name,
              ApplicantNumber: applicant_Number,
              Applicantemail: applicant_email, 
              Author: AuthorId,
              Cover_letter: cover_letter,
          };

      var newPostKey = firebase.database().ref().child('Applications').push().key;    

      var updates = {};


          updates['/Applications/' + newPostKey] = postData;
          updates[ JobId + '/Applications/' + newPostKey] = postData;

      return firebase.database().ref().update(updates); 

  }

the console display an error message of "key is not defined" in newApplication function.

Update: this is my click handler

 $('.container').on('click', '.refer', function(e){
 alert(jobID.value );
 $('.positions').addClass('fadeOut');
 $('.refer-card').addClass('fade');
  $('.return').fadeIn('fast');
 })

Answer 1

If .refer element is clicked, then in its click handler, the corresponding element with id="${key}" is given by $(this).closest("li").

Therefore you appear to want :

var JobId = $(this).closest("li").prop('id');

It's not clear how newApplication() will be called called but it would appear that you will need to pass JobId as a paramerter.