How to change button text onclick jquery

Jquery <strong>Tutorial for chaning button text after clicked</strong>. Use this simple code and change your button text.

HTML

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<div id="blue_box">
    <div id="top"></div><hr>
    <div id="left"></div>
    <div id="right"></div>
    <div id="bottom"></div><hr class="hr2"><hr class="hr3">
    <div class="divider1"></div>
    <div class="divider2"></div>
    
    
    
</div>

CSS

#top {
    width:100px;
    height:100px;
    float:center;
    margin-left:250px;
    background:purple;
    position: relative;
    z-index: 2;
    
}

#left {
    width:100px;
    height:200px;
    float:left;
    background:green;
    position: relative;
    z-index: 2;
}

#right {
    width:200px;
    height:200px;
    float:right;
    background:gray;
}

#blue_box {
    position: relative;
    background:white;
    width:700px;
    height:500px;
    padding:10px;
}

#bottom {
    width:100px;
    height:100px;
    float:center;
    margin-left:250px;
    margin-top: 240px;
    background:pink;
    position: relative;
    z-index: 2;
}

.divider1{
    position:absolute;
    left:10%;
    top:10%;
    bottom:32%;
    z-index:1;
    border-left:1px solid black;
}

.divider2{
    position:absolute;
    left:62%;
    top:10%;
    bottom:32%;
    z-index:1;
    border-left:1px solid black;
}

hr{
    width: 374px;
    margin-left: 62px;
    margin-top:-58px;
}

.hr2{
    
    width: 374px;
    margin-left: 62px;
    margin-top:-40px;

}

.hr{
    
    width: 374px;
    margin-left: 62px;
    margin-top:30px;

}

.hr3{
    width: 64px;
    margin-left: 436px;
    margin-top:-196px;

}