How, when clicking on li, create a variable and write the value of the selected li into it?

Question

JavaScript

Hello.

Here is an example .
How, when clicking on li , create a variable and write the value of the selected li into it, that is, if we select a value in the apples block, the apples variable is created and the value we stopped at is written to it, and so that when we click, the active class of the selected li is saved?

$('.star-rating').hover(function(){
  $(this).addClass('star-rating-on').prevAll('.star-rating').addClass('star-rating-on');
}, function(){
  $('.star-rating').removeClass('star-rating-on');
});

var rating = {};

$('.star-rating').on('click', function(e) {
  e.preventDefault();
  
  var $this = $(this),
  	currentBlock = $(this).closest('li').attr('class');

  $('.' + currentBlock + '.star-rating').removeClass('star-rating-on').prevAll('.star-rating').removeClass('star-rating-on');
  $this.addClass('star-rating-on').prevAll('.star-rating').addClass('star-rating-on');
  
  rating[currentBlock] = $this.attr("data-item");

  console.log(rating)
  $('#data').text(JSON.stringify(rating));
});

Answer 1

You are welcome

Answer 2

var listItemContent = '';
$(document).on('click', 'li', function () {
var self = $(this);
listItemContent = self.html(); // in case the element contains not only text, but and the markup
self.addClass('active').prevAll('li').addClass('active');
});

Answer 3

If you create a variable in an event handler, it will not be visible outside of this handler. Create a more global variable and put the value inside the handlers.