We Keep Coding

ejs dynamic form have all the same data

I'm learning ejs and I have some trouble to get some thinge working properly. I'm trying to fill out a form when user click modify, depending on which line it is, but the form is showing all the same data and I don't know why.
For exemple, if i click "Modify on the second line of the table, it's supposed to take what's on second row and fill the form with dats. But it's always filling it using the first row data, regardless of where I click. Here's the code :
<% if(data.length){
for(var i = 0;i < data.length;i++) { %>
<tr>
<td><%=data[i].ID%></td>
<td><%=data[i].NOM%></td>
<td><%=data[i].EMPLACEMENT%></td>
<td><%=data[i].UTILITE%></td>
<td><%=data[i].MARQUE%></td>
<td><%=data[i].MODELE%></td>
<td><%=data[i].NUMEROSERIE%></td>
<td><%=data[i].PROCESSEUR%></td>
<td><%=data[i].MEMOIRE%></td>
<td><%=data[i].OS%></td>
<td><%=data[i].CATEGORIE%></td>
<td><%=data[i].VALEUR%></td>
<td>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#myModal1">Modifier</button>
<!-- Modal -->
<div class="modal fade" id="myModal1" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modifier serveur</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form name="form1m" action="/update" method="post">
<div class="form-group">
<label for="Inputm">ID</label>
<input type="text" class="form-control" id="Inputm5" placeholder="ID" name="<%=data[i].ID%>" value="<%=data[i].ID%>" readonly>
</div>
<div class="form-group">
<label for="Inputm">Nom</label>
<input type="text" class="form-control" id="Inputm" placeholder="Nom" name="<%=data[i].NOM%>" value="<%=data[i].NOM%>">
</div>
<div class="form-group">
<label for="Input2m">Emplacement</label>
<input type="text" class="form-control" id="Input2m" placeholder="Emplacement" name="EMPLACEMENT" value="<%=data[i].EMPLACEMENT%>">
</div>
<div class="form-group">
<label for="Input3m">Utilité</label>
<input type="text" class="form-control" id="Input3m" placeholder="Utilité" name="UTILITE" value="<%=data[i].UTILITE%>">
</div>
<div class="form-group">
<label for="Input4m">Marque</label>
<input type="text" class="form-control" id="Input4m" placeholder="Marque" name="MARQUE" value="<%=data[i].MARQUE%>">
</div>
<div class="form-group">
<label for="Input5m">Modèle</label>
<input type="text" class="form-control" id="Input5m" placeholder="Modèle" name="MODELE" value="<%=data[i].MODELE%>">
</div>
<div class="form-group">
<label for="Input6m">Numéro de série</label>
<input type="text" class="form-control" id="Input6m" placeholder="Numéro de série" name="NUMEROSERIE" value="<%=data[i].NUMEROSERIE%>">
</div>
<div class="form-group">
<label for="Input7m">Processeur</label>
<input type="text" class="form-control" id="Input7m" placeholder="Processeur" name="PROCESSEUR" value="<%=data[i].PROCESSEUR%>">
</div>
<div class="form-group">
<label for="Input8m">Mémoire</label>
<input type="text" class="form-control" id="Input8m" placeholder="Mémoire" name="MEMOIRE" value="<%=data[i].MEMOIRE%>">
</div>
<div class="form-group">
<label for="Input9m">OS</label>
<input type="text" class="form-control" id="Input9m" placeholder="OS" name="OS" value="<%=data[i].OS%>">
</div>
<div class="form-group">
<label for="Input10m">Catégorie</label>
<input type="text" class="form-control" id="Input10m" placeholder="Catégorie" name="CATEGORIE" value="<%=data[i].CATEGORIE%>">
</div>
<div class="form-group">
<label for="Input11m">Valeur</label>
<input type="text" class="form-control" id="Input11m" placeholder="Valeur" name="VALEUR" value="<%=data[i].VALEUR%>">
</div>
<input type="submit" name="Soumettre" value="Soumettre" class="btn btn-primary"></button>
</form>
</div>
</div>
</div>
</div>
</div>
Here's how data looks like:
Data are different, but when I click edit, it shows data only from the first row.
Heres the rendered HTML (for the two rows in my last screenshot) :
<tr>
<td>20</td>
<td>test</td>
<td>1</td>
<td>S</td>
<td>HP</td>
<td>EWE</td>
<td>DFERu</td>
<td>weWE</td>
<td>wesdf</td>
<td>ESFDdddddddddddddddddddddddddddd</td>
<td>Cdeqawed</td>
<td>989</td>
<td>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#myModal1">Modifier</button>
<!-- Modal -->
<div class="modal fade" id="myModal1" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modifier serveur</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form name="form1m" action="/update" method="post">
<div class="form-group">
<label for="Inputm">ID</label>
<input type="text" class="form-control" id="Inputm5-7" placeholder="ID" name="ID" value="20" readonly>
</div>
<div class="form-group">
<label for="Inputm">Nom</label>
<input type="text" class="form-control" id="Inputm-7" placeholder="Nom" name="NOM" value="test">
</div>
<div class="form-group">
<label for="Input2m">Emplacement</label>
<input type="text" class="form-control" id="Input2m-7" placeholder="Emplacement" name="EMPLACEMENT" value="1">
</div>
<div class="form-group">
<label for="Input3m">Utilité</label>
<input type="text" class="form-control" id="Input3m-7" placeholder="Utilité" name="UTILITE" value="S">
</div>
<div class="form-group">
<label for="Input4m">Marque</label>
<input type="text" class="form-control" id="Input4m-7" placeholder="Marque" name="MARQUE" value="HP">
</div>
<div class="form-group">
<label for="Input5m">Modèle</label>
<input type="text" class="form-control" id="Input5m-7" placeholder="Modèle" name="MODELE" value="EWE">
</div>
<div class="form-group">
<label for="Input6m">Numéro de série</label>
<input type="text" class="form-control" id="Input6m-7" placeholder="Numéro de série" name="NUMEROSERIE" value="DFERu">
</div>
<div class="form-group">
<label for="Input7m">Processeur</label>
<input type="text" class="form-control" id="Input7m-7" placeholder="Processeur" name="PROCESSEUR" value="weWE">
</div>
<div class="form-group">
<label for="Input8m">Mémoire</label>
<input type="text" class="form-control" id="Input8m-7" placeholder="Mémoire" name="MEMOIRE" value="wesdf">
</div>
<div class="form-group">
<label for="Input9m">OS</label>
<input type="text" class="form-control" id="Input9m-7" placeholder="OS" name="OS" value="ESFDdddddddddddddddddddddddddddd">
</div>
<div class="form-group">
<label for="Input10m">Catégorie</label>
<input type="text" class="form-control" id="Input10m-7" placeholder="Catégorie" name="CATEGORIE" value="Cdeqawed">
</div>
<div class="form-group">
<label for="Input11m">Valeur</label>
<input type="text" class="form-control" id="Input11m-7" placeholder="Valeur" name="VALEUR" value="989">
</div>
<input type="submit" name="Soumettre" value="Soumettre" class="btn btn-primary"></button>
</form>
</div>
</div>
</div>
</div>
</div>
<form name = form2 action="/delete" method="post">
<input type="submit" name="20" value="Delete" class="btn btn-outline-danger" />
</form>
<!--20-->
<!--<form action="/update" method="put">
<input type="submit" name="20" value="Update" class="btn btn-outline-primary" />
</form>
<form action="" method="post">
<input type="submit" name="Delete" value="Delete" class="btn btn-outline-danger" />
</form>-->
</td>
<!--20-->
</tr>
<tr>
<td>21</td>
<td>r5y</td>
<td>5ry</td>
<td>r5y</td>
<td>y5r</td>
<td>w3</td>
<td>ww3</td>
<td>w3</td>
<td>55</td>
<td>6</td>
<td>7</td>
<td>677</td>
<td>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#myModal1">Modifier</button>
<!-- Modal -->
<div class="modal fade" id="myModal1" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modifier serveur</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form name="form1m" action="/update" method="post">
<div class="form-group">
<label for="Inputm">ID</label>
<input type="text" class="form-control" id="Inputm5-8" placeholder="ID" name="ID" value="21" readonly>
</div>
<div class="form-group">
<label for="Inputm">Nom</label>
<input type="text" class="form-control" id="Inputm-8" placeholder="Nom" name="NOM" value="r5y">
</div>
<div class="form-group">
<label for="Input2m">Emplacement</label>
<input type="text" class="form-control" id="Input2m-8" placeholder="Emplacement" name="EMPLACEMENT" value="5ry">
</div>
<div class="form-group">
<label for="Input3m">Utilité</label>
<input type="text" class="form-control" id="Input3m-8" placeholder="Utilité" name="UTILITE" value="r5y">
</div>
<div class="form-group">
<label for="Input4m">Marque</label>
<input type="text" class="form-control" id="Input4m-8" placeholder="Marque" name="MARQUE" value="y5r">
</div>
<div class="form-group">
<label for="Input5m">Modèle</label>
<input type="text" class="form-control" id="Input5m-8" placeholder="Modèle" name="MODELE" value="w3">
</div>
<div class="form-group">
<label for="Input6m">Numéro de série</label>
<input type="text" class="form-control" id="Input6m-8" placeholder="Numéro de série" name="NUMEROSERIE" value="ww3">
</div>
<div class="form-group">
<label for="Input7m">Processeur</label>
<input type="text" class="form-control" id="Input7m-8" placeholder="Processeur" name="PROCESSEUR" value="w3">
</div>
<div class="form-group">
<label for="Input8m">Mémoire</label>
<input type="text" class="form-control" id="Input8m-8" placeholder="Mémoire" name="MEMOIRE" value="55">
</div>
<div class="form-group">
<label for="Input9m">OS</label>
<input type="text" class="form-control" id="Input9m-8" placeholder="OS" name="OS" value="6">
</div>
<div class="form-group">
<label for="Input10m">Catégorie</label>
<input type="text" class="form-control" id="Input10m-8" placeholder="Catégorie" name="CATEGORIE" value="7">
</div>
<div class="form-group">
<label for="Input11m">Valeur</label>
<input type="text" class="form-control" id="Input11m-8" placeholder="Valeur" name="VALEUR" value="677">
</div>
<input type="submit" name="Soumettre" value="Soumettre" class="btn btn-primary"></button>
</form>
</div>
</div>
</div>
</div>
</div>
Can you help me?
Thanks

hm, my first bet would be, that the ids must be unique.
Have you tried to replace id="Input2m" with id="Input2m-<%=i%>"? (That is, adding the loop index to it).

I solved my problem, i modified these :
id="myModal1"
data-target="#myModal1"
to this :
data-target="#myModal1-<%=i%>"
id="myModal1-<%=i%>"

How to show/hide a model in form?

In my project page load model popup will appear if any of projects can be available for login user it can be show other wise not show in that model I have two anchor tags
My Projects
Add New Projects
My Projects Menu Click one form1 will be display?
Add New Projects Menu Click second form2 will be display?
Here my model code:
<div class="modal-body">
<h2 class="text-uppercase text-center m-b-30">
<a href="index.html" class="text-success">
<span>All Projects</span>
</a>
</h2>
<i class="mdi mdi-account md-18"></i> My Projects
<i class="mdi mdi-plus md-18"></i> Add New Project
<form class="form-horizontal" action="#" id="myprojects">
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="username">Name</label>
<input class="form-control" type="email" id="username" required="" placeholder="Michael Zenaty">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="emailaddress">Email address</label>
<input class="form-control" type="email" id="emailaddress" required="" placeholder="john#deo.com">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="password">Password</label>
<input class="form-control" type="password" required="" id="password" placeholder="Enter your password">
</div>
</div>
<div class="form-group m-b-20">
<div class="col-xs-12">
<div class="checkbox checkbox-custom">
<input id="checkbox11" type="checkbox" checked>
<label for="checkbox11">
I accept Terms and Conditions
</label>
</div>
</div>
</div>
<div class="form-group account-btn text-center m-t-10">
<div class="col-xs-12">
<button class="btn w-lg btn-rounded btn-lg btn-primary waves-effect waves-light" type="submit">Sign Up Free</button>
</div>
</div>
</form>
<form class="form-horizontal" action="#" id="addnewprojects">
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="username">Name</label>
<input class="form-control" type="email" id="username" required="" placeholder="Michael Zenaty">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="emailaddress">Email address</label>
<input class="form-control" type="email" id="emailaddress" required="" placeholder="john#deo.com">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="password">Password</label>
<input class="form-control" type="password" required="" id="password" placeholder="Enter your password">
</div>
</div>
<div class="form-group m-b-20">
<div class="col-xs-12">
<div class="checkbox checkbox-custom">
<input id="checkbox11" type="checkbox" checked>
<label for="checkbox11">
I accept Terms and Conditions
</label>
</div>
</div>
</div>
<div class="form-group account-btn text-center m-t-10">
<div class="col-xs-12">
<button class="btn w-lg btn-rounded btn-lg btn-primary waves-effect waves-light" type="submit">Sign Up Free</button>
</div>
</div>
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
My jQuery code:
<script type="text/javascript">
$(document).ready(function() {
$("#myprojects").hide();
$("#mp").click(function(e) {
$("#myprojects").show();
$("#mp").hide();
});
});
$(document).ready(function() {
$("#addnewprojects").hide();
$("#anp").click(function(e) {
$("#addnewprojects").show();
$("#anp").hide();
});
});
</script>
my intention is which menu I will click that form will display in the model

Now need to add add $(document).ready twice and adding couple of hide and show for working snippet. Run snippet for working example.
$("#myprojects").hide();
$("#mp").click(function(e) {
$("#myprojects").show();
$("#addnewprojects").hide();
// $(this).hide();
$("#anp").show();
});
$("#anp").click(function(e) {
$("#addnewprojects").show();
$("#myprojects").hide();
//$(this).hide();
$("#mp").show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-body">
<h2 class="text-uppercase text-center m-b-30">
<a href="index.html" class="text-success">
<span>All Projects</span>
</a>
</h2>
<i class="mdi mdi-account md-18"></i> My Projects
<i class="mdi mdi-plus md-18"></i> Add New Project
<form class="form-horizontal" action="#" id="myprojects">
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="username">Name</label>
<input class="form-control" type="email" id="username" required="" placeholder="Michael Zenaty">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="emailaddress">Email address</label>
<input class="form-control" type="email" id="emailaddress" required="" placeholder="john#deo.com">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="password">Password</label>
<input class="form-control" type="password" required="" id="password" placeholder="Enter your password">
</div>
</div>
<div class="form-group m-b-20">
<div class="col-xs-12">
<div class="checkbox checkbox-custom">
<input id="checkbox11" type="checkbox" checked>
<label for="checkbox11">
I accept Terms and Conditions
</label>
</div>
</div>
</div>
<div class="form-group account-btn text-center m-t-10">
<div class="col-xs-12">
<button class="btn w-lg btn-rounded btn-lg btn-primary waves-effect waves-light" type="submit">Sign Up Free1</button>
</div>
</div>
</form>
<form class="form-horizontal" action="#" id="addnewprojects">
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="username">Name1</label>
<input class="form-control" type="email" id="username" required="" placeholder="Michael Zenaty">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="emailaddress">Email address1</label>
<input class="form-control" type="email" id="emailaddress" required="" placeholder="john#deo.com">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="password">Password</label>
<input class="form-control" type="password" required="" id="password" placeholder="Enter your password">
</div>
</div>
<div class="form-group m-b-20">
<div class="col-xs-12">
<div class="checkbox checkbox-custom">
<input id="checkbox11" type="checkbox" checked>
<label for="checkbox11">
I accept Terms and Conditions1
</label>
</div>
</div>
</div>
<div class="form-group account-btn text-center m-t-10">
<div class="col-xs-12">
<button class="btn w-lg btn-rounded btn-lg btn-primary waves-effect waves-light" type="submit">Sign Up Free [Add New Project]</button>
</div>
</div>
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>

how to call same modal for multiple buttons

I have done bootstrap modal in different page means modal in another page(modal.html) and button in different page(career.php) it's working but same modal i want to link for multiple buttons. How to do that i am not getting
$(document).ready(function(e){
$('#btnModal') .click(function(){
//using ajaz post
$.post('modal.html' ,function(xx){
$('#tmpModal').html(xx) //fill div tmpmodal with modal.html content..!!
//calling modal
$('#testModal').modal('show');
})
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal fade" id="testModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal"><span>×</span></button>
<h4>Apply Now</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="exampleFormControlInput1">Role</label>
<input class="form-control" type="text" placeholder="Dest" readonly>
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Name</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Full Name" required data-validation-required-message="Please enter your phone">
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Email</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Email" required data-validation-required-message="Please enter your phone">
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Phone</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Phone" required data-validation-required-message="Please enter your phone">
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Comment</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<div class="form-group">
<label for="exampleFormControlFile1">Upload File</label>
<input type="file" class="form-control-file" id="exampleFormControlFile1">
</div>
</div>
<div class="modal-footer">
<div class="btn btn-danger" data-dismiss="modal">Close</div>
<button class="btn btn-primary" onclick="contact_send();">SEND</button>
</div>
</div>
</div>
</div>
<button class="btn btn-primary apply" id="btnModal">Apply</button>
<li style="display:block;"></li>
<div id="tmpModal"></div>

Add bootstrap CSS & JS
Modal
Modal
Modal
<div class="modal fade" id="testModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal"><span>×</span></button>
<h4>Apply Now</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="exampleFormControlInput1">Role</label>
<input class="form-control" type="text" placeholder="Dest" readonly>
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Name</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Full Name" required data-validation-required-message="Please enter your phone">
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Email</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Email" required data-validation-required-message="Please enter your phone">
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Phone</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Phone" required data-validation-required-message="Please enter your phone">
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Comment</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<div class="form-group">
<label for="exampleFormControlFile1">Upload File</label>
<input type="file" class="form-control-file" id="exampleFormControlFile1">
</div>
</div>
<div class="modal-footer">
<div class="btn btn-danger" data-dismiss="modal">Close</div>
<button class="btn btn-primary" onclick="contact_send();">SEND</button>
</div>
</div>
</div>
</div>
https://jsfiddle.net/k0yfpcs1/

Just do that based on the class not on id
<button class="btn btn-primary someclassname" id="btnModal">Apply</button>
and update javascript to click event on that class
$('.someclassname') .click(function(){
$.post('modal.html' ,function(xx){
$('#tmpModal').html(xx)
$('#testModal').modal('show');
})
})

I am not Getting Any Errors but When i am trying to click on Form my form Type Mouse does not appear

My form is Getting no Errors on Chrome Developers Error code but i am not getting and Text field or anything in my forms it is a very easy task but it had become a headache for me i will be very Helpfull if you help me with this
<section class="reservation">
<img class="img-responsive section-icon hidden-sm hidden-xs" src="{{ asset('frontend/images/icons/reserve_color.png') }}">
<div class="wrapper">
<div class="container-fluid">
<div class=" section-content">
<div class="row">
<div class="col-md-5 col-sm-6">
<form class="reservation-form" method="post" action="{{ route('resrvation.reserve') }}">
{{ csrf_field() }}
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<input type="text" class="form-control reserve-form empty iconified" name="name" id="name"
placeholder="  Name">
</div>
<div class="form-group">
<input type="email" name="email" class="form-control reserve-form empty iconified" id="email" placeholder="  e-mail">
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group">
<input type="tel" class="form-control reserve-form empty iconified" name="phone" id="phone" placeholder="  Phone">
</div>
<div class="form-group">
<input type="text" class="form-control reserve-form empty iconified" name="dateandtime" id="datetimepicker1" placeholder=" Time">
</div>
</div>
<div class="col-md-12 col-sm-12">
<textarea type="text" name="message" class="form-control reserve-form empty iconified" id="message" rows="3" placeholder="  We're listening"></textarea>
</div>
<div class="col-md-12 col-sm-12">
<button type="submit" id="submit" name="submit" class="btn btn-reservation">
<span><i class="fa fa-check-circle-o"></i></span>
Make a reservation
</button>
</div>
</div>
</form>
</div>

Just added BS cdn and copied your code. Everything looks fine and i see all the fields, did you include CDN as required??
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section class="reservation">
<img class="img-responsive section-icon hidden-sm hidden-xs" src="{{ asset('frontend/images/icons/reserve_color.png') }}">
<div class="wrapper">
<div class="container-fluid">
<div class=" section-content">
<div class="row">
<div class="col-md-5 col-sm-6">
<form class="reservation-form" method="post" action="{{ route('resrvation.reserve') }}">
{{ csrf_field() }}
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<input type="text" class="form-control reserve-form empty iconified" name="name" id="name" placeholder="  Name">
</div>
<div class="form-group">
<input type="email" name="email" class="form-control reserve-form empty iconified" id="email" placeholder="  e-mail">
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group">
<input type="tel" class="form-control reserve-form empty iconified" name="phone" id="phone" placeholder="  Phone">
</div>
<div class="form-group">
<input type="text" class="form-control reserve-form empty iconified" name="dateandtime" id="datetimepicker1" placeholder=" Time">
</div>
</div>
<div class="col-md-12 col-sm-12">
<textarea type="text" name="message" class="form-control reserve-form empty iconified" id="message" rows="3" placeholder="  We're listening"></textarea>
</div>
<div class="col-md-12 col-sm-12">
<button type="submit" id="submit" name="submit" class="btn btn-reservation">
<span><i class="fa fa-check-circle-o"></i></span>
Make a reservation
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>

angularjs to change css style using directive

I am trying to Manipulate DOM css style using angular , suppose text box value i want to set as height . i assigned ng-model to text box and then ng-style="{height:heightdef}"
How can i acieve this using Directive??
Fiddle ::
http://jsfiddle.net/simmi_simmi987/U5KCg/
<div ng-app="myApp" ng-controller="MyCtrl">
<div class="container">
<div class="row">
<h1>Hello, world! {{hello}}</h1>
<input type="text" />
<div ng-style="{backgroundColor:bgcolordef}">I'm a banner! + {{bgcolordef}}</div>
<div ng-style="{height:heightdef,width:widthdef,backgroundColor:bgcolordef}" class="col-md-10 col-md-offset-1" id="largebox">
<br/>
I am main Box
<a href={{link1}}><div class="smallbox pull-right col-md-2" id="box1" >{{box1label}}</div></a>
<a href={{link2}}><div class="smallbox pull-right col-md-2" id="box3" >{{box3label}}</div></a>
<a href={{link3}}><div class="smallbox pull-right col-md-2" id="box4" >{{box4label}}</div></a>
<!-- <div class="smallbox pull-right col-md-1" id="box5" >box5</div>
<div class="smallbox pull-right col-md-1" id="box6" >box6</div> -->
</div>
</div><!-- row closed -->
<br/><br/><br/><br/>
<div class="row">
<div class="form col-md-5 category">
<!-- Height input-->
<div class="form-group">
<label class="col-md-3 control-label" for="name">Height</label>
<div class="col-md-9">
<input ng-model="heightdef" id="name" name="name" type="text" placeholder="Your name" class="form-control">
</div>
</div>
<br/>
<!-- Width input-->
<div class="form-group">
<label class="col-md-3 control-label" for="name">Width</label>
<div class="col-md-9">
<input ng-model="widthdef" id="name" name="name" type="text" placeholder="Your name" class="form-control">
</div>
</div>
<br/>
<!-- BAckground-color input-->
<div class="form-group">
<label class="col-md-3 control-label" for="name">BgColor</label>
<div class="col-md-9">
<input ng-model="bgcolordef" id="name" name="name" type="text" placeholder="Your name" class="form-control">
</div>
</div>
<br/>
<button class="btn btn-primary btn-default pull-right" > Set </button>
</div>
<div class="form col-md-5 col-md-offset-1 category">
<div class="form-group indiv-box">
<h3>Box 1:</h3>
<label class="col-md-3 control-label" for="name">URL</label>
<div class="col-md-9">
<input ng-model="link1" id="name" name="name" type="text" placeholder="Your name" class="form-control">
</div>
<label class="col-md-3 control-label" for="name">Lablel</label>
<div class="col-md-9">
<input ng-model="box1label" id="name" name="name" type="text" placeholder="Your name" class="form-control">
</div>
<button class="btn btn-primary btn-default pull-right" > Set </button>
</div>
<br/><br/><br/>
<div class="form-group indiv-box">
<h3>Box 2:</h3>
<label class="col-md-3 control-label" for="name">URL</label>
<div class="col-md-9">
<input ng-model="link2" id="name" name="name" type="text" placeholder="Your name" class="form-control">
</div>
<label class="col-md-3 control-label" for="name">Lablel</label>
<div class="col-md-9">
<input ng-model="box2label" id="name" name="name" type="text" placeholder="Your name" class="form-control">
</div>
<button class="btn btn-primary btn-default pull-right" > Set </button>
</div>
<br/><br/><br/>
<div class="form-group indiv-box">
<h3>Box 3:</h3>
<label class="col-md-3 control-label" for="name">URL</label>
<div class="col-md-9">
<input ng-model="link3" id="name" name="name" type="text" placeholder="Your name" class="form-control">
</div>
<label class="col-md-3 control-label" for="name">Lablel</label>
<div class="col-md-9">
<input ng-model="box3label" id="name" name="name" type="text" placeholder="Your name" class="form-control">
</div>
<button class="btn btn-primary btn-default pull-right" > Set </button>
</div>
<br/><br/><br/>
<div class="form-group indiv-box">
<h3>Box 4:</h3>
<label class="col-md-3 control-label" for="name">URL</label>
<div class="col-md-9">
<input ng-model="link4" id="name" name="name" type="text" placeholder="Your name" class="form-control">
</div>
<label class="col-md-3 control-label" for="name">Lablel</label>
<div class="col-md-9">
<input ng-model="box4label" id="name" name="name" type="text" placeholder="Your name" class="form-control">
</div>
<button class="btn btn-primary btn-default pull-right" > Set </button>
</div>
</div>
</div><!-- row closed -->
<div> <!-- Container closed -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script type="text/javascript" src="js/ng-grid-2.0.7.min.js"></script>
</div>
Javascript ::
var app = angular.module('myApp', []);
app.controller('MyCtrl', function($scope, $http) {
$scope.hello="My dear very good morning";
$scope.heightdef=100;
$scope.widthdef=1000;
$scope.box1label="box1";
$scope.box2label="box2";
$scope.box3label="box3";
$scope.box4label="box4";
$scope.link1="box1.html";
$scope.link2="box2.html";
$scope.link3="box3.html";
$scope.link4="box4.html";
});

If I understand your question correctly, this link may be help you to get your answer. This is the link which I was looking for like you.
for short answer:
<div ng-style="{ 'height' : heightdef }"></div>

So here is the updated answer:
You should create derective according angular Directive Documentation
app.directive('myBox', function(){
function link(scope, el, attrs) {
}
return {
scope:{
options: '='
},
restrict: 'E',
link: link,
// here you can use inline template: "<div>..." or templateUrl: 'url to your partial'
};
});
so you can use it like this <my-box options='options'></my-box>
to change options by clicking button:
$scope.setMainBox = function(){
var options = {
heightdef: $scope.heightdef,
widthdef: $scope.widthdef,
bgcolordef: $scope.bgcolordef
};
$scope.options = options;
};
markup
<button ng-click="setMainBox()" class="btn btn-primary btn-default pull-right" > Set main box </button>
here is quick example