JQUERY load div in page when pressing on button on another div

OK here is my code

<!DOCTYPE html>
<html>
<head>
  <title>Hello!</title>
<style>
#add_data{
display: none;
}
</style>
</head>
<body>
<button id="data">Data</button>
<div id="container">
    <div id="content">
    <a href="#" id="add_new_data">Add New Data</a>
    <ul>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
</div>
</div>
<div id="add_data">
    <input type="text" /><br>
    <input type="text" /><br>
    <input type="text" /><br>
    <input type="text" /><br>
    <input type="submit" />
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#add_new_data").click(function(){
    $("#container").fadeOut();
    $("#add_data").fadeIn();
    return false;
});
$("#data").click(function(){
    $("#container").empty().fadeIn().load("test.html" + " #content");
    $("#add_data").fadeOut();
    return false;
});
});
</script>
</body>
</html>

Now try to press on Add New Data button , it will fadeout my data and show the form inputs

Now press on Data button to load data and fadeout my form inputs

finally press on Add New Data button , and here is my problem

i want to reload my div when i press on data button but when i do this , i can't use any other buttons

how to fix this :)

Solution

I can't test this because you haven't made a jsFiddle but I think the issue is because your events aren't delegated and so when you replace the element the events are no longer attached.

$(document).ready(function(){
    $("body").on("click", "#add_new_data", function(){
        $("#container").fadeOut();
        $("#add_data").fadeIn();
        return false;
    });
    $("body").on("click", "#data", function(){
        $("#container").empty().fadeIn().load("test.html" + " #content");
        $("#add_data").fadeOut();
        return false;
    });
});

See: http://learn.jquery.com/events/event-delegation/

As requested, here's My Attempt to Explain Event Delegation:

Imagine you have some elements with a class of 'clickme'...
<div class='clickme'>me</div>
<div class='clickme'>and me</div>
<div class='clickme'>me too</div>
...to which you attach an event listener like so:
$(".clickme").click(function(){alert("click!");});
...all good so far? Now you remove/replace these elements:
$(".clickme").remove();
$(body).append($("<div class='clickme'>what about me?</div>"));
When you remove the element the event listeners are also removed (Why listen out for an event on an element that no longer exists?) So although your new element has the right class it didn't exist at the time the event listeners were applied.

So how do we apply an event listener to an element that doesnt yet exist? We 'delegate' it to a responsible parent. IE, we give the task to a parent element and say "when I click on you please check if I'm clicking on this particular child of yours". EG:
$("#parent").on("click", ".clickme", function(){alert("click!");});
"Hey #parent, when I click on you please check if the event target has a class of clickme. If so, shout up. Ta." ;)