Custom Load More Button 2 Post Ek saat Show Ye Post title content or Readmore ka btn uthahain ga

<--Blog Post loop-->
<section class="bloghome">
<div class="container">
      <div class="bpost">
         <h1>OUR BLOG</h1>
         <hr>
         <?php
         $paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
         $q = new WP_Query(
         array(
         'post_type'       => 'post',
		  'status'          => 'published',
		  'posts_per_page'  => 9	,
		  'orderby'         => 'post_date',
		  'order'           => 'DESC',
         'paged'          => $paged
         )
         );
         ?>
         <?php
         while ($q->have_posts()) : $q->the_post(); ?>
         <div class="col-md-12">
         <article>   
         <h2><a href="<?php the_permalink() ;?>"><?php the_title(); ?></a></h2>
		 <p><?php echo substr(strip_tags(get_the_content()),0,300); ?>...</p></a>
         <a class="btn2" href="<?php the_permalink() ;?>">Read More</a>
         </article>
         </div>
         
         <?php endwhile; ?>
		 <div class="row" id="project-list"></div>
<div class="row ajaxarticle" id="project-list"></div>
<div class="clearfix"></div>
<a class="center-block btn2 misha_loadmore">Load More</a>

         </div>
         

   </div>
</section>


<-- Jquery -->
<input type="hidden" id="pageNo" value="1">
<script type="text/javascript">
$('.misha_loadmore').click(function(){
	$(".misha_loadmore").html('<img style="width: 25px;" src="https://gifimage.net/wp-content/uploads/2018/11/loading-gif-white-2.gif">');
	var pull_page = $("#pageNo").val(); 
	var jsonFlag = true;
	if(jsonFlag){
	jsonFlag = false; 
	pull_page++;

	$.getJSON("/deliverability/wp-json/posts/all-posts?page=" + pull_page, function(data){
		if(data.length){
			var items = [];
			$.each(data, function(key, val){
				const arr = $.map(val, function(el) { return el });
				var slug = arr[1];
				var type = arr[2];
				var title = arr[3];
				var post_content = arr[4];
				var category = arr[5];
				if(post_content.length > 400) post_content = post_content.substring(0,400);
				var dataString = '<div class="col-md-12">'+
					'<article>'+   
						'<h2><a href="'+slug+'">'+ title +'</a></h2>'
						+'<div class="hidden post-letter">'+ title.substring(0,1) +'</div>'
						+'<p>'+ post_content +'</p>'
						+'<a class="btn2" href="'+ slug +'">Read More</a>'
					+'</article>'
				+'</div>';
				items.push(dataString);
			});
			if(data.length >= 9){
				$("#pageNo").val(pull_page);
				
				$('li.loader').fadeOut(); 
				$("#project-list").append(items);
				$(".misha_loadmore").html('Load More');
			}else{ 
				$("#project-list").append(items); 
				$('.misha_loadmore').hide(); 
				$('#ajax-no-posts').fadeIn(); 
			} 
		}else{ 
			$('.misha_loadmore').hide(); 
			$('#ajax-no-posts').fadeIn(); 
		} 
	}).done(function(data){
		if(data.length){ jsonFlag = true;
		} 
	});
	}
});
</script>

<-- Function-->

//  Load More Ajax
function custom_api_get_projects_callback($request){
    $posts_data = array();
    $paged = $request->get_param('page');
    $paged = (isset($paged) || !(empty($paged))) ? $paged : 1;
    $posts = get_posts( array(
      'post_type'       => 'post',
      'status'          => 'published',
      'posts_per_page'  => 9,
      'orderby'         => 'post_date',
      'order'           => 'DESC',
      'paged'           => $paged
    ));

    foreach($posts as $post){
      $id = $post->ID;

      $posts_data[] = (object)array(
        'id' => $id,
        'slug' => $post->post_name,
        'type' => $post->post_type,
        'title' => $post->post_title,
        'post_content' => $post->post_content,
       
        'category' => $post_cat[0]->cat_name
      );
    }
    return $posts_data;
}

add_action('rest_api_init', 'custom_api_get_projects');
function custom_api_get_projects(){
  register_rest_route( 'posts', '/all-posts', array(
    'methods' => 'GET',
    'callback' => 'custom_api_get_projects_callback'
  ));
}