Load jquery code to work after results

Hi Darren
I need to be able to load some js code to work inside the results:
I currently do this in the template, yet this will repeat the code for each result, is there a better way you know of?

<?php global $post; ?>
<li>

   <h3><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
	<br>
   <?php the_field("country"); ?><br>
	<?php the_field("year"); ?>
	<br>
   <?php the_excerpt(); ?>
	<button id="wiki" data-subject="<?php the_title(); ?>">Wikipedia</button>
		<script>
			$("#wiki").on('click', function(e) {
			  var q = $(this).data('subject');
			  $.getJSON("https://it.wikipedia.org/w/api.php?callback=?", {
			    srsearch: q,
			    action: "query",
			    list: "search",
			    format: "json"
			  }, function(data) {
			    $("#results").empty();
			    $("#results").append("<p>Results for <b>" + q + "</b></p>");
			    $.each(data.query.search, function(i, item) {
			      $("#results").append("<div><a href='https://it.wikipedia.org/wiki/" + encodeURIComponent(item.title) + "'>" + item.title + "</a><br>" + item.snippet + "<br><br></div>");
			    });
			  });
			});
		</script>
	<output id="results"></output>
</li>