JSFiddle - React, Tailwind, and code Playground

HTML

<div id="newsList">
<input type="text" placeholder="filter..." id="filter"/>	
	<div  class="list"> 
	<div id="0-news" class="news">One</div>
    <div id="1-news" class="news">Two</div>
    <div id="2-news" class="news">Three</div>
    <div id="3-news" class="news">Last one</div>
    

<article id="selectedNews">
	<h1>Titre</h1>
	<figure>	
		<img src="" alt="titre"/>
	</figure>
	<div id="content">
		bla bla
	</div>
</article>

CSS

#selectedNews {
  border : 1px solid gray;
  margin : 10px;
  padding : 5px;
}

.news{
  background-color : green;
  border : 2px solid black;
  padding : 4px;
  margin-top : 2px;
  text-align : center;
}

JavaScript

var newsListData = [
  {
	    "group" : "science",
	    "title" : "Текст тут",
	    "image" : "images/news1.jpg",
	    "content" : "Много текста."
	},
	{
	    "group" : "science",
	    "title" : "Название",
	    "image" : "images/news2.jpg",
	    "content" : "Очень много текста"
	},
	{
	    "group" : "science",
	    "title" : 'Название',
	    "image" : "images/news3.jpg",
	    "content" : "Много текста"
	},
	{
	    "group" : "economics",
	    "title" : 'Еще название',
	    "image" : "images/news4.jpg",
	    "content" : "Очень много текста"
	}]




var selected;
function showMore() {
  // пустой элемент selected
  selected.innerHTML = "";
  // потомок элемента, на которого наведена мышь
  for (var i = 0; i < this.children.length; i++) {
    // клонирую элементы и отправляю в selected
    selected.appendChild(this.children[i].cloneNode(true));
  }
}

// элементы к показу
document.addEventListener("DOMContentLoaded", function() {
  // Выбор элементов
  var selectedNews = newsListData;
  for (var i = 0; i < selectedNews.length; i++) {
    // Добавляю listeners
    selectedNews[i].addEventListener("click", showMore);
  }
  selected = document.getElementById("selectedNews")
});