diff --git a/layouts/partials/home/projects.html b/layouts/partials/home/projects.html
index 8e2c057..afba803 100644
--- a/layouts/partials/home/projects.html
+++ b/layouts/partials/home/projects.html
@@ -15,7 +15,7 @@
                 {{ else }}
                 <div class="column is-one-third">
                 {{ end }}
-                    <div id="project-{{ $index }}" class="card">
+                    <div class="card" data-target="#project-{{ $index }}">
                         <div class="card-image">
                             <figure class="image is-3by2">
                                 <a {{ if .Params.external_link }} href="{{ .Params.external_link }}" {{ end }}>
@@ -60,7 +60,7 @@
             </section>
             {{ end }}
         </div>
-        <button class="modal-close is-large" aria-label="close"></button>
+        <button class="modal-close is-large" aria-label="close" data-target="#project-{{ $index }}"></button>
     </div>
     {{ end }}
     {{ end }}
diff --git a/static/js/index.js b/static/js/index.js
index 847d6a4..195ad57 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -10,10 +10,10 @@ $('a[href^="#"]').click(function(e) {
 
 // Modal closer
 $('.card').click(function () {
-    $('#'+this.id+'.modal').addClass('is-active');
+    $($(this).attr('data-target')).addClass('is-active');
 });
 $('.modal-close').click(function () {
-    $('#'+$(this).parent('.modal').get(0).id+'.modal').removeClass('is-active');
+    $($(this).attr('data-target')).removeClass('is-active');
 });
 $(document).keypress(function(e) {
     if(e.which == 0) {