Listing schema :

const listingSchema = new Schema({
    title : {
        type :String,
        required : true,
    },
    description : String,
    image : {
        type : String,
        default :
        "https://images.app.goo.gl/oMwfut7SSe1GwpyS7",
        set : (v) => 
        v === undefined 
        ? "https://images.app.goo.gl/oMwfut7SSe1GwpyS7"
        : v,
    },
    price : Number,
    location : String,
    country : String,
    reviews : [
        {
            type : Schema.Types.ObjectId,
            ref : "Review",
        },
   ],
   blogs : [
    {
        type : Schema.Types.ObjectId,
        ref : "Blog",
    },
   ],
   owner : {
        type : Schema.Types.ObjectId,
        ref : "User",
   },
});


//create the model using Scehma created
const Listing = mongoose.model("Listing", listingSchema);

//export Model to app.js
module.exports = Listing;

Blog schema :

const blogSchema = {
    blogCreator : {
        type: Schema.Types.ObjectId,
        ref : "User",
    },
    description :{ 
        type : String,
        required : true,
    },
    amenities : {
        type :String,
        required : true,
    },
    rating : {
        type :Number,
        min : 1,
        max : 5
    },
    convenience : {
        type : String,
        required : true,
    },
    checkIn : {
        type : String,
        required : true,
    },
    security : {
        type : String,
        required : true,
    },
    cancellation : {
        type : String,
        required : true,
    },
    pets : {
        type : String,
        required : true,
    },
};

let Blog = mongoose.model("Blog", blogSchema);
module.exports = Blog;

The Listing schema and Blog schema has one to many relation. I’m trying to populate from listing schema to blog schema using the blogId’s in the “blogs[]” property of listing schema in the following route to print the “blogCreator” and “description” of each blog of that listing using the following ejs template :

<div class="list-group">
                <% listing.blogs.forEach(blog => { %>
                    
                    <a href="/listings/<%= listing._id %>/blogs/<%= blog._id %>" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                        <div>
                            <strong><%= blog.blogCreator %></strong>
                            <p class="mb-1"><%= blog.description ? blog.description.substring(0, 50) : '' %>...</p>
                        </div>
                    </a>
                <% }) %>
            </div>

The routes used for this particular function is :

router.get('/', wrapAsync(async (req, res) => {
    const listing = await Listing.findById(req.params.id)
        .populate({
            path: "blogs",
            populate: {
                path: "blogCreator",
                model: 'User'
            }
        })
        //also render reviews for blog path {the path has changed so the previous render review code does not work for this path anymore}
        .populate({
            path : "reviews",
            populate : {
                path: "author",
                model: 'User'
            }
        })
        .populate("owner","User");
    // const blog = await Blog.findById(req.params.blogId).populate('blogCreator');
    if (!listing) {
        return res.status(404).send('Listing not found');
    }
    res.render('listings/show', { listing });
}));
router.get('/:blogId', wrapAsync(async (req, res) => {
    const listing = await Listing.findById(req.params.id)
        .populate({
            path: 'blogs',
            populate: {
                path: 'blogCreator',
                model: 'User'
            }
        })
        //also render reviews for blog path {the path has changed so the previous render review code does not work for this path anymore}
        .populate({
            path : "reviews",
            populate : {
                path: "author",
                model: 'User'
            }
        })
        .populate("owner","User");
    const blog = await Blog.findById(req.params.blogId).populate('blogCreator');

    //render views properly in blog route

    if(!listing){
        req.flash("error","Listing you requested for does not exist!");
        res.redirect("/listings");
    }
    if (!blog) {
        req.flash("error", "Blog you requested for does not exist!");
        return res.redirect(`/listings/${listing._id}`);
    }
    //render page
    res.render('listings/show', { listing, selectedBlog: blog });
}));

I tried changing the

<a href="/listings/<%= listing._id %>/blogs/<%= blog._id %>" 

to

<a href="/listings/<%= listing._id %>/blogs" 

so that i could change the display of the blogs of the listing when one single blog isn’t selected and add the blog decription and it’s creator’s name to the list instead of printing just ‘…’ for every blog in the list.
This results in display of the required after the blog is selected inside the tab, and then it doesn’t switch back.
Before, the after selectedBlog feature was working properly and I just wanted to display the name of the creator and description in the list name like a whatsapp chat, now it doen’t open the blog at all, and nothing is displayed on the list name just ‘…’ like before.