Showing selected words [Javascript]

The words inside the sentence are highlighted when clicked with the mouse. It works right up here.

But; Show the selected words with the button, unfortunately, does not work.

JSFiddle

words = [];
var sentence = $('.sentence').html().split(/\s+/),
  result = [];


for (var i = 0; i < sentence.length; i++) {
  result[i] = '<span>' + sentence[i] + '</span>';
  var a = sentence[i];
}

$('.sentence').html(result.join(' '));

if (a.indexOf(" ") + 1) {
  alert('fail: ' + a);
} else {
  words.push(a);
}

$('.sentence').on('click', 'span', function() {
  $(this).addClass('highlight');
});

$('button').click(function() {
  alert(words);
});

$('$selectedWords').innerHTML = words;
.sentence span:hover,
.highlight {
  background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="sentence">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique aliquam totam odit excepturi reiciendis quam doloremque ab eius quos maxime est deleniti praesentium. Quia porro commodi blanditiis iure dicta voluptatibus.</p>



Selected words:
<p id="selectedWords"></p>

<button>Show in alert</button>
words = [];
var sentence = $('.sentence').html().split(/\s+/),
  result = [];


for (var i = 0; i < sentence.length; i++) {
  result[i] = '<span>' + sentence[i] + '</span>';
  var a = sentence[i];
}

$('.sentence').html(result.join(' '));

$('.sentence').on('click', 'span', function() {
  $(this).addClass('highlight');
  words.push(this.textContent)
  $('#selectedWords').text(words.join(', '));
});

$('button').click(function() {
  alert(words);
});

Thank you for your time @jenovs