Reveal modal failed to open Fondation 6 - zurb-foundation-6

Question

I'm trying to make a modal reveal for every Edit button just when i clicked onto the Edit button it doesnt open i did as mentionned onto the documentation for Foundation 6 .Here is my code.Please any help.
<ul class="button-group">
i give to every reveal modal an id based on the field id with that i would have
different ids and linked every Edit button with its modal
<li>
<a class="button tiny" data-open="editModal<?php echo $contact->id ;?>"
data-contact-id="<?php echo $contact->id;?>">Edit</a>
<!-- the modal edit start here -->
<div class="reveal large editmodal" id="editModal<?php echo $contact->id ;?>"
data-cid="<?php echo $contact->id ;?>" data-reveal>
<div class="grid-x grid-margin-x">
<div class="cell large-12"><h1>Edit Contact</h1></div>
</div>
form of the edit modal
<form action="#" id="editadress" method="post">
<div class="grid-x grid-margin-x">
<div class="cell large-6">
first name input field
<label>First Name
<input type="text" name="first_name" placeholder="Enter Your First Name"
value="<?php echo $contact->first_name; ?>">
</label>
</div>
<div class="cell large-6">
last name input field
<label>Last Name
<input type="text" name="last_name" value="<?php echo $contact->last_name; ?>"
placeholder="Enter Your Last Name">
</label>
</div>
</div>
submit button of the form
<div class="grid-x grid-margin-x">
<div class="cell large-12">
<input class="button big abutton right small" name="submit" type="submit" value="Submit"/>
</div>
</div>
</form>
close button of the modal
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<!--The modal edit ends here-->
</li>
<li>
<a class="button alert tiny">Delete</a>
</li>
</ul>