How to add a new element to array in arrays in JavaScript

Question

I added 2 elements to my array in JavaScript and HTML,I want to add a copy to clipboard button as a new element to each array,but I am struggling to do this due to the complicated codes. here is my code

 var currImage = 0; window.onload = () => { const factsArr = [ { image:'https://media.giphy.com/media/3o7aD5tv1ogNBtDhDi/giphy.gif', source:"<a href='http://news.nationalgeographic.com/news/2010/03/100315-half-male-half-female-chickens/' style='text-decoration:none;color:#FFFFFF;' target='_blank'>know more</a>",}, { image:'https://media.giphy.com/media/1nkUav308CBws/giphy.gif', source:"<a href='http://www.guinnessworldrecords.com/world-records/most-expensive-pizza' style='text-decoration:none;color:#FFFFFF;'target='_blank'>know more</a>"}, ]: const swtch = () => { document.getElementsByClassName('image')[0].setAttribute('src', factsArr[currImage].image); document.getElementsByClassName('source')[0].innerHTML=factsArr[currImage].source; document.getElementById('copyToClipboard').innerHTML=copyToClipboard(element).copyToClipboard currImage++; if (currImage == factsArr.length) currImage = 0; console.log(currImage); }; document.getElementsByClassName('generate-btn')[0].addEventListener('click', swtch); document.getElementsByClassName('source')[0].addEventListener('click', swtch); } function copyToClipboard(element) { var $temp = $("<input>"); $("body").append($temp); $temp.val($(element).text()).select(); document.execCommand("copy"); $temp.remove(); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="generate-btn">Amazing Fact Button</button> <div class="source"></div> <img class="image" /> <button onclick="copyToClipboard('element')">Copy Link</button> 

Answer 1

 var currImage = 0; window.onload = () => { const factsArr = [ { image:'https://media.giphy.com/media/3o7aD5tv1ogNBtDhDi/giphy.gif', source:"<a href='http://news.nationalgeographic.com/news/2010/03/100315-half-male-half-female-chickens/' style='text-decoration:none;color:#FFFFFF;' target='_blank'>know more</a>",}, { image:'https://media.giphy.com/media/1nkUav308CBws/giphy.gif', source:"<a href='http://www.guinnessworldrecords.com/world-records/most-expensive-pizza' style='text-decoration:none;color:#FFFFFF;'target='_blank'>know more</a>"}, ]; const swtch = () => { $('.image').attr('src', factsArr[currImage].image); $('.source').html(factsArr[currImage].source); $('.copyToClipboard').data('test',factsArr[currImage].image); $('.test').css('display', 'block'); currImage++; if (currImage == factsArr.length) currImage = 0; console.log(currImage); }; $('.generate-btn').on('click', swtch); $('.source').on('click', swtch); } function copyToClipboard() { var $temp = $("<input>"); $("body").append($temp); $temp.val($('.copyToClipboard').data('test')).select(); document.execCommand("copy"); $temp.remove(); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="generate-btn">Amazing Fact Button</button> <div class="test" style="display:none;"> <div class="source"></div> <img class="image" /> <button class="copyToClipboard" onclick="copyToClipboard()">Copy Link</button> </div>