CLASS=“active” de acordo com um tab selecionado

Olá!

Tenho a intenção de criar um bloco de notas, onde será inserido um título e uma nota.

Para cada nota inserida, será criado um tab.

Eu quero clicar sobre o tab e carregar o título e a nota em um input e área de texto automaticamente.

Para recuperar os valores estou usando o seguinte código:

<?php
$this->db->order_by('id' , 'desc');
$this->db->where('usuario_id' , $this->session->userdata('id'));
$this->db->where('usuario_nome' , $this->session->userdata('usuario_nome'));
$nota = $this->db->get('nota')->result_array();
?>

Porem não estou conseguindo exibir no bloco somente do id clicado(tab selecionada).

Para cada nota, está sendo exibido um bloco(Ver imagem de exemplo).

Abaixo está todo o código que estou utilizando até então:

<?php
	$this->db->order_by('id' , 'desc');
	$this->db->where('usuario_id' , $this->session->userdata('id'));
	$this->db->where('usuario_nome' , $this->session->userdata('usuario_nome'));
	$nota = $this->db->get('nota')->result_array();
?>

<div class="row">
 <div class="col-sm-4">
 <ul class="nav tabs-vertical" style="">
<?php foreach ($nota as $row){?>
 <li class="active">
 <a href="#<?php echo $row['id'];?>" data-toggle="tab"> <i class=""></i> <?php echo $row['titulo'];?> </a>
 </li>
<?php }?>
 </ul>
	</div>
	<div class="col-sm-8">
 <div class="tab-content" style="width: 70%;">
<?php
$counter = 0;

foreach ($nota as $row):

$counter++;
?>
 <div class="tab-pane active"
 " id="<?php echo $row['id'];?>">
 <div id="sample" class="ruledpaper ">
 <div class="form-group" style="margin: 0px;">
 <div class="col-md-12" style="padding:0px; background-color: #FFFCEE; font-size: 5px;">
 <input type="text" class="form-control" rows="14" style="padding: 5px; border:0px; background-color: #fff6cc; font-size: 18px;" name="titulo" placeholder="Título" value="<?php echo $row['titulo'];?>">
 </div>
 </div>
 <hr style="margin: 0px;" />
 <div class="form-group">
 <div class="col-md-12" style="padding:0px;">
 <textarea maxlength="60" class="ruledpaper form-control" rows="" cols="" style="padding: 5px; border:0px; min-height: 350px;" name="nota" placeholder="Digite o texto....."><?php echo $row['nota'];?></textarea>
 </div>
 </div>
 </div>
<?php endforeach;?>
 </div>
	</div>
	</div>

Acredito que deve existir algum código para ativar e desativar a class em:

<li class="código para ativar classe">
 <a href="#<?php echo $row['id'];?>" data-toggle="tab"> <i class=""></i> <?php echo $row['titulo'];?> </a>
</li>

E outro código para ativar class em:

<div class="tab-pane código para ativar classe" ...

Não sei exatamente o que deve ser feito e nem como fazer.
Podem me ajudar?

Vejam imagem de como está hoje:https://i.stack.imgur.com/4oAgx.png

Vejam como eu desejo: https://i.stack.imgur.com/zivb6.png