How can I have two images appear on screen after modal box closes?

Question

I have created a modal box named sectors. When the user clicks on a sub category within my modal box the image is shown on screen after clicking apply.

The problem is that I can only get one image to show at a time, instead of both images related to their sub category.

 var content = ""; $('a[href="#ex5"]').click(function(event) { event.preventDefault(); $(this).modal({ escapeClose: false, clickClose: false, showClose: false, }); $('#myDiv, #myDivs').addClass('hideme'); $('input[type=checkbox]').prop('checked', false); }); $('.yourCheckbox, .yourCheckboxx').change(function() { if ($(this).prop("checked")) { //$("#" + $(this).data('target')).removeClass('hideme'); content = $("#" + $(this).data('target')).html(); } else { //$("#" + $(this).data('target')).addClass('hideme'); content = ""; } $("#" + $(this).data('target')).toggleClass('hideme'); }); $('[rel="modal:close"]').on('click', () => { $('.btn').siblings().first().html('').append(content); }) 

 .onlyThese { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } input[type="checkbox"]+label { color: blue } input[type="checkbox"] { display: none } input[type="checkbox"]:checked+label { color: red } input:focus { outline: none; } .hideme { display: none; } .spaz { color: blue; margin-left: 40% } 

 <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script> <!-- Remember to include jQuery :) --> <!-- jQuery Modal --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" /> <p> <a class="btn" href="#ex5">Sectors </a> <span class="spaz"></span> </p> <div id="ex5" ; class="modal" style="background-color:white"> <div style="float:left"> <p> <input type="checkbox" id="group1" class="yourCheckbox" data-target="myDiv" checked="checked"> <label for="group1" class="onlyThese">Publication </label> </p> <div id="myDiv"> <img src="https://tse4.mm.bing.net/th?id=OIP.qKsWIt_Qae6vtWd3-RulIQHaHa&pid=Api&P=0&w=300&h=300.jpg"> </div> <p> <input type="checkbox" id="group2" class="yourCheckboxx" data-target="myDivs" checked="checked"> <label for="group2" class="onlyThese">Food </label> </p> <div id="myDivs"> <img src="https://tse3.mm.bing.net/th?id=OIP.HcL9FITSR_SWsLMgMFMkYAHaEo&pid=Api&P=0&w=281&h=176.jpg"> </div> </div> <div> <div> <p style="float:right"> <a href="#" rel="modal:close" class="onlyThese;"> <b>Apply</b> </a> </p> </div> </div> 

Expected result is:

• the user clicks on my modal box called sectors t
• he user interacts with a sub category
• when the user has interacted with both sub categories upon clicking apply images both sub categories and their respective image should appear on screen.

Answer 1

The problem is with content = $("#" + $(this).data('target')).html(); you are reassigning your content value, what you want to do is adding the new value to your content as below.

Currently you can append all images multiple Times, but opening the box again and again, is that what you are trying to achieve or is that an error as well?

 var content = ""; $('a[href="#ex5"]').click(function(event) { event.preventDefault(); $(this).modal({ escapeClose: false, clickClose: false, showClose: false, }); $('#myDiv, #myDivs').addClass('hideme'); $('input[type=checkbox]').prop('checked', false); }); $('.yourCheckbox, .yourCheckboxx').change(function() { var elemContent = $("#" + $(this).data('target')).html(); if ($(this).prop("checked")) { //$("#" + $(this).data('target')).removeClass('hideme'); content += elemContent; } else { //$("#" + $(this).data('target')).addClass('hideme'); content = content.replace(elemContent, ''); } $("#" + $(this).data('target')).toggleClass('hideme'); }); $('[rel="modal:close"]').on('click', () => { $('.btn').siblings().first().html('').append(content); content= ''; }) 

 .onlyThese { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } input[type="checkbox"]+label { color: blue } input[type="checkbox"] { display: none } input[type="checkbox"]:checked+label { color: red } input:focus { outline: none; } .hideme { display: none; } .spaz { color: blue; margin-left: 40% } 

 <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script> <!-- Remember to include jQuery :) --> <!-- jQuery Modal --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" /> <p> <a class="btn" href="#ex5">Sectors </a> <span class="spaz"></span> </p> <div id="ex5" ; class="modal" style="background-color:white"> <div style="float:left"> <p> <input type="checkbox" id="group1" class="yourCheckbox" data-target="myDiv" checked="checked"> <label for="group1" class="onlyThese">Publication </label> </p> <div id="myDiv"> <img src="https://tse4.mm.bing.net/th?id=OIP.qKsWIt_Qae6vtWd3-RulIQHaHa&pid=Api&P=0&w=300&h=300.jpg"> </div> <p> <input type="checkbox" id="group2" class="yourCheckboxx" data-target="myDivs" checked="checked"> <label for="group2" class="onlyThese">Food </label> </p> <div id="myDivs"> <img src="https://tse3.mm.bing.net/th?id=OIP.HcL9FITSR_SWsLMgMFMkYAHaEo&pid=Api&P=0&w=281&h=176.jpg"> </div> </div> <div> <div> <p style="float:right"> <a href="#" rel="modal:close" class="onlyThese;"> <b>Apply</b> </a> </p> </div> </div>