JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<button onclick="display(0)">
one
</button>
<button onclick="display(1)">
  two
</button>
<button onclick="display(2)">
  three
</button>
<button onclick="display(3)">
  four
</button>

<div id="content">
  <div>
    Group: <span id="group"></span>
  </div>
  
  <div>
    Title: <span id="title"></span>  
  </div>
  
</div>
</div>

JavaScript

(function(){
  var newsListData = [
    {
        "group" : "science",
        "title" : "Text 1",
        "image" : "images/news1.jpg",
        "content" : "Text text text"
    },
    {
        "group" : "science",
        "title" : "Text 2",
        "image" : "images/news2.jpg",
        "content" : "Text text text"
    },
    {
        "group" : "science",
        "title" : 'Text 3',
        "image" : "images/news3.jpg",
        "content" : "Text text text"
    },
    {
        "group" : "economics",
        "title" : 'Text 4',
        "image" : "images/news4.jpg",
        "content" : "Text text text"
    }]

  var content, group, title;

  content = document.getElementById("content");
  title   = document.getElementById("title");
  group   = document.getElementById("group");

  window.display = function(index) {
    var data = newsListData[index];

    title.innerHTML = data.title;
    group.innerHTML = data.group;
  }
})();