Twitter bootstrap always same content - php

Question

I'm using twitter bootstrap modals for some update of contacts, but I have some problems. The modal always display the information of the first contact. However when I display the information outside the modal, this is displayed in the correct form
<?php foreach($contacts as $contact): ?>
<?php if($school==$contact->Schools_id): ?>
<table class="table table-bordered table-hover">
<tbody><br>
<button role="button" class="btn"><?php echo anchor('contacts/delete_contact/'.$contact->Contacts_id,' <i class="icon-remove"></i>'); ?></button>
<i class="icon-pencil"></i>
<tr>
<td>Name</td>
<td><?php echo $contact->name. " ". $contact->last_name; ?></td>
</tr>
<tr>
<td>Title</td>
<td><?php echo $contact->title; ?></td>
</tr>
<tr>
<td>Phone</td>
<td><?php echo $contact->phone; ?> </td>
</tr>
<tr>
<td>Email</td>
<td><?php echo $contact->email; ?></td>
</tr>
<div id="UpdateContact" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" tabindex="-1" aria-hidden="true">
<div class="modal-header">
<?php $hidden = array('contact_id' => $contact->Contacts_id,
'school_id' => $contact->Schools_id);
echo form_open_multipart('contacts/update_contact', "", $hidden); ?>
<h3>Update Contact</h3>
</div>
<div class="modal-body">
<label for="name">First Name <span class="required">*</span></label>
<input id="name" type="text" name="name" maxlength="20" ]
value="<?php echo set_value('name', $contact->name ); ?>" />
<br><br>
<label for="last_name">Last Name <span class="required">*</span></label>
<input id="last_name" type="text" name="last_name" maxlength="20" ]
value="<?php echo set_value('last_name', $contact != NULL ? $contact->last_name : " " ); ?>" />
<br><br>
<label for="title">Title <span class="required">*</span></label>
<input id="title" type="text" name="title" maxlength="45" ]
value="<?php echo set_value('title', $contact != NULL ? $contact->title : " " ); ?>" />
<br><br>
<label for="phone">Phone<span class="required">*</span></label>
<input id="phone" type="text" name="phone" maxlength="11" ]
value="<?php echo set_value('phone', $contact != NULL ? $contact->phone : " " ); ?>" />
<br><br>
<label for="email">Email<span class="required">*</span></label>
<input id="email" type="text" name="email" maxlength="45" ]
value="<?php echo set_value('email', $contact != NULL ? $contact->email : " " ); ?>" />
</div>
<div class="modal-footer">
<?php echo form_submit( array('class' => 'btn btn-primary', 'name' =>'submit', 'value' => 'Submit')); ?>
<?php echo form_close(); ?>
</div>
</div>
</div>
</tbody>
</table>
<?php endif ?>
<?php endforeach ?>
Some of the solutions I found in this question Twitter bootstrap remote modal shows same content everytime was:
<script type="text/javascript">
$(document).ready( function(){
$('#UpdateContact').on('hide', '.modal', function () {
$(this).removeData('modal');
});
});
</script>
But is still not working for me.

Answer 1

Like datasage said your modal DIV id is not unique. concat your DIV id with the contact id to make each modal unique.
<div id="UpdateContact<?php echo $contact->Contacts_id ?>"
Also make sure you link your HREF the same way