Defining a Bootstrap button on a separate php file - php

Question

Working with two php files, index.php and search.php. index sends some parameters to search, which performs a few queries into a database, and then returns the information on a table, stored into $output.
I now want to add a bootstrap button to the output, that calls a simple show/hide jQuery function.
The button is created, but it doesn't work when I test it on index.php
<div class="col-sm-8">
<table class="table table-hover" id="output">
</table>
<div id="edit" >
<div class="page-header" id="editar" style="display: none;">
<h2 id="producto">Placeholder<button id="exit" type="button" class="btn pull-right"><span class="glyphicon glyphicon-remove"></button><!--Clicking this button hides the edit div and shows the output table--></h2>
</div>
</div>
</div>
The exit/editbtn button calls the following:
<script>
$(document).ready(function(){
$("#exit").click(function(){
$(document.getElementById("edit")).hide();
$(document.getElementById("output")).show();
});
});
$(document).ready(function(){
$("#editbtn").click(function(){
$(document.getElementById("edit")).show();
$(document.getElementById("output")).hide();
});
});
</script>
And the definition of the "editbtn" is made on the separate php file:
if($query->num_rows){
$rows = $query->fetch_all(MYSQLI_ASSOC);
forEach($rows as $row){
$output .= '<tr><td><button id="editbtn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-pencil"></span></button></td><!--Clicking this button hides the output table and shows the edit div--></tr>';
}
$output .= '</tbody>';
So in the end, I have the table with the button created, but it does nothing when I click on it.

Answer 1

Why dont you try the same in order?
Like:
<script>
$(document).ready(function(){
$("#exit").click(function(){
$("#edit").hide();
$("#output").show();
});
$("#editbtn").click(function(){
$("#edit")).show();
$("#output")).hide();
});
});
</script>
This should work, always that you dont insert the edit button with ajax AND by definition, if you are using IDs, you are supposed to have only one element, if you have it between a foreach, it could cause you a problem.

Answer 2

It seems to be the jQuery selectors, they should be like this:
$("#edit").show();
Or in JavaScript:
document.getElementById('edit').styles.display = "none"; //or use addClass
PD: don't use two ready functions, put the listeners on the same one ;)
Edit:
Add a console.log in the function, and check out the console on the developer tools of your browser. Also try to comment the PHP query, except the output.