JSFiddle - React, Tailwind, and code Playground
HTML
<div class="row">
<a href="#anch1" class="videoA">
<span>Hot tub time machine</span>
<span>26 марта 2010 г.</span>
</a>
<span id="anch1" class="videoB">back to da 70s</span>
</div>
<div class="row">
<a href="#anch2" class="videoA">
<span>Hot tub time machine</span>
<span>26 марта 2010 г.</span>
</a>
<span id="anch2" class="videoB">back to da 70s</span>
</div>
<div class="row">
<a href="#anch3" class="videoA">
<span>Hot tub time machine</span>
<span>26 марта 2010 г.</span>
</a>
<span id="anch3" class="videoB">back to da 70s</span>
</div>
CSS
.row{
margin: 10px 0;
}
.row *{
display:block;
}
.row span{
margin: 0 5px;
}
.row a{
display:block;
margin: 0 0 10px;
background: orange;
color: #000;
text-decoration: none;
}
.videoB{
font-size: smaller;
}
.disabled{
display:none;
}
JavaScript
$(".videoB").toggleClass("disabled");
$(".videoA").on("click", function () {
$(this).next(".videoB").toggleClass("disabled");
return false;
});