JSFiddle - React, Tailwind, and code Playground

HTML

<div id="2011" class="xxx">2011</div>
 <div id="2010" class="xxx">2010</div>
 <div id="2009" class="xxx">2009</div>
 <div id="2008" class="xxx">2008</div>
 
 <table id="ttt" width="500" border="1" cellspacing="0" cellpadding="0">
   <tr>
     <td><a href="#2011">2011</a></td>
     <td><a href="#2010">2010</a></td>
     <td><a href="#2009">2009</a></td>
     <td><a href="#2008">2008</a></td>
   </tr>
 </table>

<div class="yyy">yyy</div>

CSS

.xxx {
  width:200px;
  background-color:#00CC99;
  margin:10px;
}
.yyy {
  height:1000px;
}

JavaScript

$(document).ready(
   function() {
   //////////////////////////
  
  $('#ttt td').each(function(){
    var $this = $(this);
    $this.data('ahref', $this.find('a').text());
  });

  $('#ttt a').live('click', function(){
    makea();
    $this = $(this).closest('td');
    $this.html($this.text());
  });

   //////////////////////////
   }// ready
 );

function makea() {
  $('#ttt td').each(function(){
    var $this = $(this);
    if ($this.find('a').length) return true;
    $this.html('<a href="#' + $this.data('ahref') + '">' + $this.data('ahref') + '</a>');
  });
}