JSFiddle - React, Tailwind, and code Playground

HTML

<section class="lala">
  <div class="media3">
    <img id="new1"src="https://i.postimg.cc/yY0HLCvp/facebook.png"><img id="new2" style="display:none;"src="https://i.postimg.cc/MHRh31bf/instagram.png">
    <img id="new3"src="https://i.postimg.cc/yY0HLCvp/facebook.png"><img id="new4" style="display:none;"src="https://i.postimg.cc/MHRh31bf/instagram.png">
    <img id="new5"src="https://i.postimg.cc/yY0HLCvp/facebook.png"><img id="new6" style="display:none;"src="https://i.postimg.cc/MHRh31bf/instagram.png">
   <img id="new7"src="https://i.postimg.cc/yY0HLCvp/facebook.png"><img id="new8" style="display:none;"src="https://i.postimg.cc/MHRh31bf/instagram.png">
   <img id="new9"src="https://i.postimg.cc/yY0HLCvp/facebook.png"><img id="new10" style="display:none;"src="https://i.postimg.cc/MHRh31bf/instagram.png">
   </div>
</section>

<div class="video" style="display:none;">
    <img src="https://as2.ftcdn.net/jpg/00/00/57/35/500_F_573556_fGmwktYr1XKdRjt3iNgydn5kuiNfpc.jpg">
</div>

CSS

.media3{
  width:100%;
  display:flex;
  flex-direction: column;
  }
  
  .media3 img {
    width:100px;
    height:auto;
  }
.media3 h2{
  font-size: 16px; 
  color: red; 
  font-weight: bold;
  padding-bottom:20px;
}
.media3 p{
  color: rgb(112, 111, 111); 
  font-size: 16px; 
  font-weight: bold;
  padding-bottom: 20px;
}
.media3 strong{
  font-size:17px;
  font-weight: bold;
}
.media4{
  color:#FF0000;
  font-size:12px;
}

.video.for {
  display:block;
}

JavaScript

$(function() {
  $(document).on('click', '#new1', function () { 
    $("#new1").css('display', 'none');
    $("#new2").css('display' , 'block');
  });
});
$(function() {
  $(document).on('click', '#new2', function () { 
    $("#new1").css('display', 'block');
    $("#new2").css('display' , 'none');
  });
});


$(function() {
  $(document).on('click', '#new3', function () { 
    $("#new3").css('display', 'none');
    $("#new4").css('display' , 'block');
  });
});



$(function() {
  $(document).on('click', '#new4', function () { 
    $("#new3").css('display', 'block');
    $("#new4").css('display' , 'none');
  });
});




$(function() {
  $(document).on('click', '#new5', function () { 
    $("#new5").css('display', 'none');
    $("#new6").css('display' , 'block');
  });
});



$(function() {
  $(document).on('click', '#new6', function () { 
    $("#new5").css('display', 'block');
    $("#new6").css('display' , 'none');
  });
});



$(function() {
  $(document).on('click', '#new7', function () { 
    $("#new7").css('display', 'none');
    $("#new8").css('display' , 'block');
  });
});


$(function() {
  $(document).on('click', '#new8', function () { 
    $("#new7").css('display', 'block');
    $("#new8").css('display' , 'none');
  });
});



$(function() {
  $(document).on('click', '#new9', function () { 
    $("#new9").css('display', 'none');
    $("#new10").css('display' , 'block');
  });
});


$(function() {
  $(document).on('click', '#new10', function () { 
    $("#new9").css('display', 'block');
    $("#new10").css('display' , 'none');
  });
});