OnClick change the model.firstObject data

1. I have a model that shows data in a li tag on the left side.

2. On the right side one of the model.firstObject display

3. When users click on the current li tag, I would like change the right side model.firstObject to show current li data.

What's the best way to handle something like this?

<div class="food-menu">
    <ul class="menu-list">
      
        <li class="menu selectable ">
          <div class="picture-wrapper">
            <img src="" alt="">
          </div>
          <div class="info-box">
            <h2 class="name"></h2>
              <p class="light-blue title-company">
                 
            </p>
          </div>
        </li>
      
    </ul>
  </div>
  <div class="menu-detail">
    
      <div class="menu menu-banner">
        <div class="picture-wrapper">
          <img src="" alt="">
        </div>
        <div class="info-box">
          <h2 class="light name"></h2>
          <p class="light-blue title-company">
            
          </p>
        </div>
      </div>
    
  </div>