JSFiddle - React, Tailwind, and code Playground

by Lynda333

HTML

<div class="prev"></div>
<div class="next"></div>

<div class="blog-post-list" style="display:none;">
<div class="post-info" data-blog-post-ID="472142">
    <span class="link">/blog/post1</span>
  <span class="title">Post 1</span>
</div>
<div class="post-info" data-blog-post-ID="472636">
  <span class="link">/blog/post2</span>
  <span class="title">Post 2</span>
</div>
<div class="post-info" data-blog-post-ID="472239">
  <span class="link">/blog/post3</span>
  <span class="title">Post 3</span>
</div>
<div class="post-info" data-blog-post-ID="472140">
  <span class="link">/blog/post4</span>
  <span class="title">Post  4</span>
</div>
<div class="post-info" data-blog-post-ID="472141">
  <span class="link">/blog/post5</span>
  <span class="title">Post 5</span>
</div>
<div class="post-info" data-blog-post-ID="472137">
  <span class="link">/blog/post6</span>
  <span class="title">Post 6</span>
</div>
<div class="post-info" data-blog-post-ID="472138">
  <span class="link">/blog/post7</span>
  <span class="title">Post 7</span>
</div>
<div class="post-info" data-blog-post-ID="472120">
  <span class="link">/blog/post8</span>
  <span class="title">Post 8</span>
</div>
</div>

JavaScript

$(function() {
		var blogID = "472140",
			blogList = $(".blog-post-list").find("[data-blog-post-ID='" + blogID + "']");
		
		
			var prevLink = blogList.prev( ".link" ).text(),
				prevTitle = blogList.prev( ".title" ).text(),
				nextLink = blogList.next( ".link" ).text(),
				nextTitle = blogList.next( ".title" ).text();
			
			$( ".prev" ).html( '<a href="' + prevLink + '">' +prevTitle+ '</a>' );
			$( ".next" ).html( '<a href="' + nextLink + '">' +nextTitle+ '</a>' );
	
	});