click show and hide search box

I want to do it like in the video I uploaded below. That’s what I’ve done for now, but when I click the search icon, I can’t replace it with the x icon. I think I couldn’t do this because I have little knowledge of Javascript. I would be very happy if you could help me with this.
https://files.fm/f/856dwf9kj

function buttonUp(){
         var valux = $('.sb-search-input').val(); 
            valux = $.trim(valux).length;
            if(valux !== 0){
                $('.sb-search-submit').css('z-index','99');
            } else{
                $('.sb-search-input').val(''); 
                $('.sb-search-submit').css('z-index','-999');
            }
    }
    
    $(document).ready(function(){
        var submitIcon = $('.sb-icon-search');
        var submitInput = $('.sb-search-input');
        var searchBox = $('.sb-search');
        var qutu = $('.qutu');
        var isOpen = false;
        
        $(document).mouseup(function(){
            if(isOpen == true){
            submitInput.val('');
            $('.sb-search-submit').css('z-index','-999');
            submitIcon.click();
            }
        });
        
        submitIcon.mouseup(function(){
            return false;
        });
        
        searchBox.mouseup(function(){
            return false;
        });
                
        submitIcon.click(function(){
            if(isOpen == false){
                searchBox.addClass('sb-search-open');
                qutu.removeClass('noborder');
                qutu.addClass('bborder');
                isOpen = true;
            } else {
                searchBox.removeClass('sb-search-open');
                qutu.removeClass('bborder');
                qutu.addClass('noborder');
                isOpen = false;
            }
    });

});
body{
    margin: 40px 60px;
}
*{
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
     transition: all 0.5s;
}
form{
    display: inline-block;
}
.sb-search {
    position: relative;
    margin-top: 10px;
    width: 0%;
    min-width: 50px;
    height: 50px;
    float: right;
    overflow: hidden;
    -webkit-transition: width 0.3s;
    -moz-transition: width 0.3s;
    transition: width 0.5s;
    -webkit-backface-visibility: hidden;
}
.bborder{
    opacity: 1;
}
.noborder{
    opacity: 0;
}

.sb-search-input {
    position: absolute;
    top: 0;
    right: 0px;
    border: none;
    outline: none;
    width: 300px;
    height: 50px;
    margin: 0;
    z-index: 10;
    padding: 20px 65px 20px 20px;
    font-family: inherit;
    font-size: 20px;
    color: #2c3e50;
}
 
input[type="search"].sb-search-input {
    -webkit-appearance: none;
    -webkit-border-radius: 0px;
    border:1px black solid;
}
.sb-search-input::-webkit-input-placeholder {
    color: #fff;
}
 
.sb-search-input:-moz-placeholder {
    color: #fff;
}
 
.sb-search-input::-moz-placeholder {
    color: #fff;
}
 
.sb-search-input:-ms-input-placeholder {
    color: #fff;
}

.sb-icon-search,
.sb-search-submit  {
    width: 60px;
    height: 60px;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    padding: 0;
    margin: 0;
    line-height: 60px;
    text-align: center;
    cursor: pointer;
}

.sb-search-submit {
    background: #fff; /* IE needs this */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */
    filter: alpha(opacity=0); /* IE 5-7 */
    opacity: 0;
    color: transparent;
    border: none;
    outline: none;
    z-index: -1;
}

.sb-icon-search {
    color: black;
    background: #fff;
    width: 35px;
    height: 0px;
    z-index: 90;
    margin: -5px;   
    top: 1px;
    right: 6px; 
    font-size: 22px;
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
}
 
.sb-icon-search:before {
    content: "";
}

.sb-search.sb-search-open,
.no-js .sb-search {
    width: 300px;
}

.sb-search.sb-search-open .sb-icon-search,
.no-js .sb-search .sb-icon-search {
    background: #fff;
    color: black;
    z-index: 11;
}

.sb-search.sb-search-open .sb-search-submit,
.no-js .sb-search .sb-search-submit {
/*    z-index: 90;*/
}
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Search bar</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css'><link rel="stylesheet" href="./style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>
<body>
<!-- partial:index.partial.html -->
<div id="sb-search" class="sb-search " >
    <form>
        <input class="sb-search-input qutu noborder" onkeyup="buttonUp();" placeholder="Enter your search term..." onblur="monkey();" type="search" value="" name="search" id="search">
        <input class="sb-search-submit" type="submit"  value="">
        <span class="sb-icon-search"><i class="fa fa-search"></i></span>
    </form>
</div>
<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script  src="./script.js"></script>

</body>
</html>

Answer

I made a really simple example below from the snippet you gave. The only differences are inside the submitIcon.click. You just have to do how you have done for your elements searchBox and qutu by adding/removing classes. Thanks to this, you will be able to change the FontAwesome icon you want to use for the element. It is probably perfectible, like by checking if the class exists before remove or add it (in a straight cae it should not, but we never know).

function buttonUp(){
         var valux = $('.sb-search-input').val(); 
            valux = $.trim(valux).length;
            if(valux !== 0){
                $('.sb-search-submit').css('z-index','99');
            } else{
                $('.sb-search-input').val(''); 
                $('.sb-search-submit').css('z-index','-999');
            }
    }
    
    $(document).ready(function(){
        var submitIcon = $('.sb-icon-search');
        var submitInput = $('.sb-search-input');
        var searchBox = $('.sb-search');
        var qutu = $('.qutu');
        var isOpen = false;
        
        $(document).mouseup(function(){
            if(isOpen == true){
            submitInput.val('');
            $('.sb-search-submit').css('z-index','-999');
            submitIcon.click();
            }
        });
        
        submitIcon.mouseup(function(){
            return false;
        });
        
        searchBox.mouseup(function(){
            return false;
        });
                
        submitIcon.click(function(){
            if(isOpen == false){
                searchBox.addClass('sb-search-open');
                qutu.removeClass('noborder');
                qutu.addClass('bborder');
                searchBox.find('i.fa').removeClass('fa-search');
                searchBox.find('i.fa').addClass('fa-times');
                isOpen = true;
            } else {
                searchBox.removeClass('sb-search-open');
                qutu.removeClass('bborder');
                qutu.addClass('noborder');
                searchBox.find('i.fa').removeClass('fa-times');
                searchBox.find('i.fa').addClass('fa-search');
                isOpen = false;
            }
    });

});
body{
    margin: 40px 60px;
}
*{
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
     transition: all 0.5s;
}
form{
    display: inline-block;
}
.sb-search {
    position: relative;
    margin-top: 10px;
    width: 0%;
    min-width: 50px;
    height: 50px;
    float: right;
    overflow: hidden;
    -webkit-transition: width 0.3s;
    -moz-transition: width 0.3s;
    transition: width 0.5s;
    -webkit-backface-visibility: hidden;
}
.bborder{
    opacity: 1;
}
.noborder{
    opacity: 0;
}

.sb-search-input {
    position: absolute;
    top: 0;
    right: 0px;
    border: none;
    outline: none;
    width: 300px;
    height: 50px;
    margin: 0;
    z-index: 10;
    padding: 20px 65px 20px 20px;
    font-family: inherit;
    font-size: 20px;
    color: #2c3e50;
}
 
input[type="search"].sb-search-input {
    -webkit-appearance: none;
    -webkit-border-radius: 0px;
    border:1px black solid;
}
.sb-search-input::-webkit-input-placeholder {
    color: #fff;
}
 
.sb-search-input:-moz-placeholder {
    color: #fff;
}
 
.sb-search-input::-moz-placeholder {
    color: #fff;
}
 
.sb-search-input:-ms-input-placeholder {
    color: #fff;
}

.sb-icon-search,
.sb-search-submit  {
    width: 60px;
    height: 60px;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    padding: 0;
    margin: 0;
    line-height: 60px;
    text-align: center;
    cursor: pointer;
}

.sb-search-submit {
    background: #fff; /* IE needs this */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */
    filter: alpha(opacity=0); /* IE 5-7 */
    opacity: 0;
    color: transparent;
    border: none;
    outline: none;
    z-index: -1;
}

.sb-icon-search {
    color: black;
    background: #fff;
    width: 35px;
    height: 0px;
    z-index: 90;
    margin: -5px;   
    top: 1px;
    right: 6px; 
    font-size: 22px;
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
}
 
.sb-icon-search:before {
    content: "";
}

.sb-search.sb-search-open,
.no-js .sb-search {
    width: 300px;
}

.sb-search.sb-search-open .sb-icon-search,
.no-js .sb-search .sb-icon-search {
    background: #fff;
    color: black;
    z-index: 11;
}

.sb-search.sb-search-open .sb-search-submit,
.no-js .sb-search .sb-search-submit {
/*    z-index: 90;*/
}
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Search bar</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css'><link rel="stylesheet" href="./style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>
<body>
<!-- partial:index.partial.html -->
<div id="sb-search" class="sb-search " >
    <form>
        <input class="sb-search-input qutu noborder" onkeyup="buttonUp();" placeholder="Enter your search term..." onblur="monkey();" type="search" value="" name="search" id="search">
        <input class="sb-search-submit" type="submit"  value="">
        <span class="sb-icon-search"><i class="fa fa-search"></i></span>
    </form>
</div>
<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script  src="./script.js"></script>

</body>
</html>