i want to execute a function every time i click on a button Using JQuery

I want to make a dynamic list of colors using jQuery and CSS (and ofc php but this is not related to my issue).

There is a problem when they click on 'choose a color' button my color list will appear and if user click on any of them others will get a display none and here is a problem if user try to change a selected color it doesn't work!

<div class="onfocus">
  <div class="color-select">
    <ul class="ul-color">              
      <li id="slect-color"><a href="#">choose a color</a></li>
      <li><a href="#">color1</a></li>
      <li><a href="#">color2</a></li>
      <li><a href="#">color3</a></li>
      <li><a href="#">color4</a></li>
      <li><a href="#">color5</a></li>                
    </ul>
  </div>
</div>

$('.ul-color li').on('click',function(){        
  $(this).css('display','none');

  for(var x = 0 ; x < 10; x++){
    $('.ul-color li').eq(x).css('left', 90*x+'px');
  }

  $('.ul-color li').click(function(){         
    $('.ul-color li').css('display','none');
    $(this).css('display','block');
    $(this).css('left','20px');            
  });
});

.onfocus{
    position: absolute;
    left : 50%;
    top :50%;
    width: 1700px;
    height: 300px;
    background-color: #2c3e50;
    transform: translate(-50%,-50%);
}
.color-select{
    margin-top: 20px;
    margin-left: 20px;
}
.color-select ul{
    list-style: none;
    max-width: 70px;
    display: flex;  
}
.color-select ul li{
    margin-right: 10px;
    padding: 10px;
    position: absolute;
    transition: .5s;  
}
.color-select ul li:nth-child(1){
    z-index: 10;
    background-color: black;
    border-radius: 5px;
}
.color-select ul li+li{
    left: 20px;
}
.color-select ul li a{
    color : #fff    
}
.color-select ul li:hover{
    background-color: #e74c3c;
    border: none;
    border-radius: 5px;
}

Before any click : pic-1

After i clicked on 'choose a color' : pic-2

if i select any color others will get a display none except the one that we selected and it will get a 'left 20px' too: pic-3

so now if i want to change my selected color i have to click on my previous one and it should be something like 2nd picture but nothing gonna happen pic-4