Pass data to a jQuery modal

Question

Using a simple modal built from scratch. Nothing fancy added yet. But I need to pass the data from the array and the only thing I get onclick so far is the last member of the array added to all clickable elements. Please advise on what to do to make sure that appropriate data is passed on click.

 <div id="skills-mobile">
     <!-- popup content -->
     <div id="myModal" class="modal">
         <img class="close-icon" src="img/close-icon.png" alt="cross or close the window icon">
         <article class="modal-content">

         </article>
     </div>
 </div>

And this is the array of objects being used:

var skills = [
        {
            "id":"html-5",
            "skill":"HTML5",
        },
        {
            "id":"css-3",
            "skill":"CSS3"
        },
        {
            "id":"jvscrpt",
            "skill":"Javascript"
        },
        {
            "id":"inter-map",
            "skill":"Interaction Mapping"
        },
        {
            "id":"wire",
            "skill":"Wireframing"
        },
        {
            "id":"docum",
            "skill":"Documentation"
        },
        {
            "id":"adobecc",
            "skill":"Adobe CC"
        }
    ]

And this is jQuery. Right now it also outputs values over and over again when I close the modal and open it again. So it'll basically append it over and over and I need to fix it, I know. If possible, please provide guidance of where I am doing it wrong. I think the structure isn't right.

var skillSlideshow = function() {

        for(var i = 0; i <= skills.length; i++) {

            $('#skills-mobile').append('<img id="' + skills[i].id + '" class="skill-img" data-toggle="modal" data-id="107" src="' + skills[i].iconurl + '" />');

            //MODALS
            // Get the modal
            var modal = document.getElementById('myModal');

            // Get the button that opens the modal
            var imgbtn = document.getElementById(skills[i].id);

            // Get the <span> element that closes the modal
            var closebtn = document.getElementsByClassName("close-icon")[0];

            // When the user clicks the button, open the modal
            imgbtn.onclick = function() {
                modal.style.display = "block";
            }

            // When the user clicks on <span> (x), close the modal
            closebtn.onclick = function() {
                modal.style.display = "none";
            }

            // When the user clicks anywhere outside of the modal, close it
            window.onclick = function(event) {
                if (event.target == modal) {
                    modal.style.display = "none";
                }
            }
        }
    };
    skillSlideshow();

Answer 1

$('#myModal .modal-content').html('')

Considering the repeating contents on each click, the above code will empty the whole contents and replace them with a new one.

It can be run right before looping the list.

Answer 2

This should make it work...

var skills = [
        {
            "id":"html-5",
            "skill":"HTML5",
        },
        {
            "id":"css-3",
            "skill":"CSS3"
        },
        {
            "id":"jvscrpt",
            "skill":"Javascript"
        },
        {
            "id":"inter-map",
            "skill":"Interaction Mapping"
        },
        {
            "id":"wire",
            "skill":"Wireframing"
        },
        {
            "id":"docum",
            "skill":"Documentation"
        },
        {
            "id":"adobecc",
            "skill":"Adobe CC"
        }
    ]
    var clearModal = function() {
      $('#myModel').css('display', 'none')
      $(".modal-content").empty();
    }
    var skillSlideshow = function() {

        for(var i = 0; i < skills.length; i++) {
            $('#skills-mobile').append('<img id="' + skills[i].id + '" class="skill-img" data-toggle="modal" data-id="107" data-index="'+ i +'"src="' + skills[i].iconurl + '" />')
        }
      
        $('.skill-img').on('click', function(e) {
          $('#myModel').css('display', 'block');
          var data = skills[parseInt(e.currentTarget.dataset.index)]
          //injecting the data into the modal
          const html = "<div>id:" + data.id + "</div><div>skill:" + data.skill + "</div>"
          $('.modal-content').html(html)
        })
        
        $('.close-icon').on('click', clearModal)
        $('#myModal').on('click', function(e) {
          //assuming you give proper styling to .modal-content and .modal
          if(e.target.id === 'myModal') clearModal()
        })
    };
    skillSlideshow();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="skills-mobile">
     <!-- popup content -->
     <div id="myModal" class="modal">
         <img class="close-icon" src="img/close-icon.png" alt="cross or close the window icon">
         <article class="modal-content">

         </article>
     </div>
 </div>