anchor.diff:  }
   </style>
   <body>
  +
  +
  +	<!-- add successfully alert -->
  +	<c:if test="${AddedSuc =='1'}">
  +		<script>
  +        alert("Mentee added successfully");
  +        //alert("${AddedSuc}");
  +       
  +    </script>
  +		<c:set var="AddedSuc" value="0" scope="request" />
  +
  +	</c:if>
  +
  +	<!-- welcome bar -->
   	<nav class="icon-bar">
  -	<div class="icon-bar">
  -		  <a class="active" href="welcome"><i class="fa fa-home"></i></a> 
  -		  <a href="GetAllMentors"><i class="fa fa-black-tie"></i></a> 
  -		  <a href="GetAllMentees"><i class="fa fa-graduation-cap"></i></a> 
  -		  <a href="GetAllPairs"><i class="fa fa-group"></i></a>
  -
  -		  <a href="#"><i class="fa fa-bell"></i></a>
  -		  <a href="#"><i class="fa fa-clipboard"></i></a>		  
  -	</div>
  -</nav>
  +		<div class="icon-bar">
  +			<a href="#"><i class="fa fa-home"></i></a> <a href="#"><i
  +				class="fa fa-black-tie"></i></a> <a class="active" href="#"><i
  +				class="fa fa-graduation-cap"></i></a> <a href="#"><i
  +				class="fa fa-group"></i></a> <a href="#"><i class="fa fa-bell"></i></a>
  +			<a href="#"><i class="fa fa-clipboard"></i></a>
  +		</div>
  +	</nav>
   	<h1>Mentees</h1>
  +
  +
   	<section>
   		<!--for demo wrap-->
   		<div class="tbl-header">
  +
   			<table id="table_detail" cellpadding="0" cellspacing="0" border="0">
   				<thead>
   					<tr>
  
positive.code: 					</tr>
  
  				</thead>
  				</div>
  
  				<div class="tbl-content" style="height: 100%">
  					<tbody>
  						<c:forEach items="${Mentees}" var="ment">
  							<tr class="stam" onclick="show_hide_row('hidden_row${ment.id}');">
  								<td style="display: none">${ment.id}</td>
  								<td>${ment.firstName}</td>
  								<td>${ment.lastName}</td>
  								<td>${ment.phoneNumber}</td>
  								<td>${ment.email}</td>
  							</tr>
  
  							<tr id="hidden_row${ment.id}" class="hidden_row"
  								onclick="fun(this)">
  								<td colspan=4>
  									<div class="tab" >
  								
  										<button class="tablinks" 
  											onclick="showDetails(event, 'info${ment.id}')">Info</button>
  										<button class="tablinks"
  											onclick="showDetails(event, 'Academic${ment.id}')">Academic</button>
  										<button class="tablinks"
  											onclick="showDetails(event, 'Notes${ment.id}')">Notes</button>
  										<button class="tablinks"
  											onclick="showDetails(event, 'Tsofen${ment.id}')">Tsofen</button>
  										<button class="tablinks"
  											onclick="showDetails(event, 'Mentor${ment.id}')">Mentor</button>
  										<button class="tablinks" style=" float: right;"
  											onclick="show_hide_row('hidden_row${ment.id}');">close</button>	
  											
  									</div>
  
  									<div id="info${ment.id}" class="tabcontent" style="background-color: #f1f1f1;">
  									
  										<table class="w3-table-all w3-card-4">
  									
  											<tr>
  												<th>First name</th>
  												<th>Last name</th>
  												<th>Gender</th>
  												<th>Address</th>
  												<th>Phone</th>
  												<th>Email</th>
  											</tr>
  											<tr>
  												<td >
  												<div id="div1${ment.id}" ondblclick="showStuff('div1${ment.id}','input1${ment.id}');">${ment.firstName}</div>
  												 <input id="input1${ment.id}" type="text" value="${ment.firstName}" style="display :none;">
  												</td>
  												
  												<td>
  												<div id="div2${ment.id}" ondblclick="showStuff('div2${ment.id}','input2${ment.id}');">${ment.lastName}</div>
  												<input id="input2${ment.id}" type="text" value="${ment.lastName}"   style="display :none;">
  												</td>
  												<td>
  												<div id="div3${ment.id}" ondblclick="showStuff('div3${ment.id}','input3${ment.id}');">${ment.gender}</div>
  												<input id="input3${ment.id}" type="text" value="${ment.gender}"   style="display :none;">
  												
  												</td>
  												<td>
  												<div id="div4${ment.id}" ondblclick="showStuff('div4${ment.id}','input4${ment.id}');">${ment.address}</div>
  												<input id="input4${ment.id}" type="text" value="${ment.address}"   style="display :none;">
  												</td>
  												<td>
  												<div id="div5${ment.id}" ondblclick="showStuff('div5${ment.id}','input5${ment.id}');">${ment.phoneNumber}</div>
  												<input id="input5${ment.id}" type="text" value="${ment.phoneNumber}"   style="display :none;">
  												</td>
  												<td>
  												<div id="div6${ment.id}" ondblclick="showStuff('div6${ment.id}','input6${ment.id}');">${ment.email}</div>
  												<input id="input6${ment.id}" type="text" value="${ment.email}"   style="display :none;">
  												</td>
  												<td><button>save</button></td>
  											</tr>
  										</table>
  										
  
  									</div>
  
  									<div id="Academic${ment.id}" class="tabcontent" style="background-color: #f1f1f1;">
  
  										<table class="w3-table-all w3-card-4">
  											<tr>
  												<th>Remaining semesters</th>
  												<th>Graduation status</th>
  												<th>Academic institution</th>
  												<th>average</th>
  												<th>Major</th>
  												<th>Second major</th>
  											</tr>
  											<tr>
  												<td>
  										<div id="div7${ment.id}" ondblclick="showStuff('div7${ment.id}','input7${ment.id}');">${ment.remainingSemesters}</div>
  										<input id="input7${ment.id}" type="text" value="${ment.remainingSemesters}"   style="display :none;">
  												</td>
  												<td>
  												<div id="div8${ment.id}" ondblclick="showStuff('div8${ment.id}','input8${ment.id}');">${ment.graduationStatus}</div>
  										<input id="input8${ment.id}" type="text" value="${ment.graduationStatus}"   style="display :none;">
  												</td>
  												<td><div id="div9${ment.id}" ondblclick="showStuff('div9${ment.id}','input9${ment.id}');">${ment.academiclnstitution}</div>
  												<input id="input9${ment.id}" type="text" value="${ment.academiclnstitution}"   style="display :none;">
  												</td>
  												<td>
  												<div id="div10${ment.id}" ondblclick="showStuff('div10${ment.id}','input10${ment.id}');">${ment.average}></div>
  												<input id="input10${ment.id}" type="text" value="${ment.average}"   style="display :none;">
  												</td>
  												<td>
  												<div id="div11${ment.id}" ondblclick="showStuff('div11${ment.id}','input11${ment.id}');">${ment.academicDicipline}</div>
  												<input id="input11${ment.id}" type="text" value="${ment.academicDicipline}"   style="display :none;">
  												</td>
  												<td>
  												<div id="div12${ment.id}" ondblclick="showStuff('div12${ment.id}','input12${ment.id}');">${ment.academicDicipline2}</div>
  												<input id="input12${ment.id}" type="text" value="${ment.academicDicipline2}"   style="display :none;">
  												</td>
  												<td><button>save</button></td>
  											</tr>
  										</table>
  
  									</div>
  
  									<div id="Notes${ment.id}" class="tabcontent" style="background-color: #f1f1f1;">
  									<table>
  									<tr>
  									<div id="div13${ment.id}" ondblclick="showStuff('div13${ment.id}','input13${ment.id}');">${ment.note}</div>
  									
  									 <textarea id="input13${ment.id}" value="${ment.note}" style="display :none; height: 100px;">${ment.note}</textarea>
  									</tr>
  									<tr>
  									 <button style=" float: right;">save</button>
  									 </tr>
  									</table>
  									</div>
  
  										<div id="Tsofen${ment.id}" class="tabcontent" style="background-color: #f1f1f1;">
  										<table>
  										<tr>
  										 ${ment.note}
  										</tr>
  										<tr>
  										<button style=" float: right;">save</button>
  										</tr>
  										
  										
  										</table>
  										
  										
  										
  									</div>
  									<div id="Mentor${ment.id}" class="tabcontent" style="background-color: #f1f1f1;">
  										<table>
  										<tr>
  										 ${ment.note}
  										</tr>
  										<tr>
  											
  										<button style=" float: right;">save</button>
  										</tr>
  										
  										
  										</table>
  									</div>
  
  								</td>
  							</tr>
  
  						</c:forEach>
  
  					</tbody>
  
negative.code: 	src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  
  <script type="text/javascript">
  
  var prevRow;
  
  	function show_hide_row(row,mentId,def) {
  		$("#" + prevRow).toggle();
  		$("#" + row).toggle();
  		document.getElementById(def).click();
  		prevRow=row;
  		
  		for(var i=1;i<=13;i++)  //length of inputs
  		{
  		showStuff("input"+i+mentId,"div"+i+mentId);
  		}
  	backUpInputs(mentId);
  
  	}
  	function closeRow(row,mentId) {
  		//hide the row
  		$("#" + row).toggle();
  		prevRow=null;
  		
  		for(var i=1;i<=13;i++)  //length of inputs
  			{
  			showStuff("input"+i+mentId,"div"+i+mentId);
  			}
  		backUpInputs(mentId);
  		
  	}
  	function backUpInputs(mentId){
  		
  		for(var i=1;i<=13;i++)  //length of inputs
  		{
  			document.getElementById("input"+i+mentId).value =document.getElementById("div"+i+mentId).innerHTML;
  		}
  		
  		
  	}
  	function showStuff(hide, show) {
  		
  	     document.getElementById(show).style.display  = 'block';
  	    document.getElementById(hide).style.display  = 'none';
  	    
  	}
  	
  </script>
  
  <script>
  