JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<p>Image 1 <button onclick="saveLightbox('imgID1')" type="button">Add to Lightbox</button></p>
<p>Image 2 <button onclick="saveLightbox('imgID2')" type="button">Add to Lightbox</button></p>
<p>Image 3 <button onclick="saveLightbox('imgID3')" type="button">Add to Lightbox</button></p>
<p>Image 4 <button onclick="saveLightbox('imgID4')" type="button">Add to Lightbox</button></p>
<p>Image 5 <button onclick="saveLightbox('imgID5')" type="button">Add to Lightbox</button></p>
<p>Image 6 <button onclick="saveLightbox('imgID6')" type="button">Add to Lightbox</button></p>

<form id="form1" name="form1" action="lightbox.html">
	<input type="submit" id="login" value="View Lightbox"/>
</form>

<div id="result"></div>

JavaScript

function saveLightbox(ID){
   
   $.cookie.json = true;
    
   var idContainer = ($.cookie('the_cookie')) || [];
    
   idContainer.indexOf(ID) === -1 && idContainer.push(ID);
    
   $.cookie('the_cookie', idContainer, { expires: 7 });
    
   document.getElementById("result").innerHTML = $.cookie('the_cookie');

}