Modal loads perfectly fine but it won`t respond inside modal - php

Question

Assigning php
if(isset($_SESSION['email'])) {
$login = $_SESSION['email'];
$conn = mysqli_connect("localhost", "root", "demo1234", "fromayu");
$con = mysqli_connect("localhost", "root", "demo1234", "fromayu");
$i = 0;
$rowsperpage=2;
$get_user = "select * from users where email='$login'";
$run_user = mysqli_query($con, $get_user);
$row=mysqli_fetch_array($run_user);
$user_id = $row['id'];
$user_name = $row['name'];
if (isset($_REQUEST['page'])) {
$page = $_REQUEST['page'];
$page=$page - 1;
$getuserenterpage=$page * $rowsperpage;
$get_posts = "select * from anotice ORDER BY 1 DESC LIMIT $getuserenterpage,$rowsperpage";
$run_posts = mysqli_query($conn, $get_posts);
}else{
$get_post = "select * from anotice ORDER BY 1 DESC LIMIT 0,2";
$run_posts = mysqli_query($conn, $get_post);
}
while ($row_posts=mysqli_fetch_array($run_posts)) {
$edit_id1 = $row_posts['id'];
$title = $row_posts['title'];
$image = $row_posts['image'];
$desc = substr($row_posts['description'],0,150);
$category = $row_posts['category'];
$batchid=$row_posts['batch_id'];
$dbatch=$row_posts['batch'];
$username=$row_posts['notice_by'];
$date = date('Y-m-d', strtotime($row_posts['date']));
?>
Using buttons and loading contents.Modal loads perfectly fine but when I want to click on textarea inside modal, It won`t respond, another modal has been loaded hidden on background.
<div class="row-fluid">
<div class="span12">
<div class="media user">
<div class="media-body">
<h2 class="media-title" data-target="#popup<?php echo $i; ?>_<?php echo $edit_id1; ?>"><strong>Title: <?php echo $title; ?></strong>
</h2>
<i class="icon-trash"></i>
<button data-target="#popup<?php echo $i; ?>_<?php echo $edit_id1; ?>" data-toggle="modal" class='pull-right text-xs m-t-sm btn btn-info'><i class="icon-edit"></i></button>
<p>
<div class="pull-left">
<img src="../../storage/teacher_submitted_notice/images/<?php echo $image; ?>" width="120" height="120"/> </div>
<small class="muted">Description: <?php echo $desc; ?>...<a class="text-info" href="#">Read More</a></small></p>
<em class="pull-right text-xs"> Posted on <span class="text-default"><strong><?php echo $date; ?></strong></span> for <span class="text-default"><strong><?php echo $category; ?></strong></em>
</div>
</div>
</div>
</div>
Starting modal with respective ids. It shows but it wont respond inside modal when i clicked in textarea or title. Only works when i use tab from keyboard
<br />
<div class="modal fade" id="popup<?php echo $i; ?>_<?php echo $edit_id1; ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit Notice</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" hidden="hidden">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<form method="POST" enctype="multipart/form-data">
<label for="recipient-name" class="col-form-label">Title</label>
<input style="position:relative;width:485px;" type="text" name="title" id="title" class="form-control" value="<?php echo $title; ?>">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Description</label>
<textarea style="position:relative;width:485px;" rows="4" cols="6" name="description" id="description" class="form-control"><?php echo $desc; ?></textarea>
</div>
<select class="form-control" name="selectCategory" id="selectCategory" onclick="javascript:$('#selectCategory').change(function () {
var selected_option = $('#selectCategory').val();
if (selected_option === 'student') {
$('#cmbbatch').show();
}
if (selected_option === 'teacher') {
$('#cmbbatch').hide();
}
});">
<option>Choose Category</option>
<option value="teacher">Teacher</option>
<option value="student">Student</option>
</select>
<select style="position:relative;left:55px;" class="form-control" name="cmbBatch" id="cmbbatch">
<option value="batch">Choose Batch</option>
<?php
$query = "SELECT * FROM batch";
$result = mysqli_query($con, $query);
while ($row = mysqli_fetch_array($result)) {
$id = $row['id'];
$batch= $row['batch'];
?>
<option value="<?php echo $id; ?>"><?php echo $batch; ?></option>
<?php
}
?>
</select><br>
<input type="file" name="image" id="image" required="required">
<img style="position:relative;left:22px;" src="../../storage/teacher_submitted_notice/images/<?php echo $image; ?>" height="120" width="120" name="image">
<input type="hidden" name="notic_id" id="notic_id" value="<?php echo $edit_id1; ?>"/>
<input type="hidden" name="notice_by" id="notice_by" value="<?php echo $username; ?>"/>
<input type="hidden" name="edited_by" id="edited_by" value="<?php echo $user_name; ?>"/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<input type="submit" name="update" id="update" value="Update" onclick="javascript:document.getElementById('update').value='Updating!'"class="btn btn-info" />
</div>
</div>
</div>
<?php
$i++;
?>
</div>
</form>
<?php
}
include 'totalnoticepage.php';
?>
<?php
}else{
header('Location: ../../index.php');
}
?>

Answer 1

Problem solved by adding hide class
<div class="modal hide fade" id="popup<?php echo $i; ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">