为什么每次单击按钮都会成倍增加？ (javascript ejs)

Question

It was supposed to be one red button or one blue button but every click on a blue button add 1 button on each line.
And every click on a red button deletes 1 button on each line.

image:

<% for (var i=0; i < loadPosts.length; i++) { %>
    <tr>
        <td><%= loadPosts[i].name %></td>
        <td><%= loadPosts[i].price %></td>
        <td><%= loadPosts[i].id %></td>

        <td>
            <% for ( var j=0; j < homeProduct.length; j++ ) { %>
                <% if ( homeProduct[j].ProductId === loadPosts[i].id ) { %> 
                    <button  class="btn btn-danger"><a style="color: white; 
                        cursor: pointer; text-decoration: none;" 
                        href="/deleteFromHomePage/<%= 
                        loadPosts[i]._id%>">DeleteFromHomePage</a></button>
                <% } else { %>
                    <button  class="btn btn-primary"><a style="color: white; 
                         cursor: pointer; text-decoration: none;" 
                         href="/addToHomePage/<%= 
                         loadPosts[i]._id%>">AddToHomePage</a></button>
                <% } %>
            <% } %>   
        </td>   
        <td> 
            <button  class="btn btn-danger"><a style="color: white; 
                 cursor:pointer; text-decoration: none;" href="/delete/<%= 
                 loadPosts[i]._id%>">Delete</a></button>
        </td>
        
        
    </tr>
    
<% } %>

Answer 1

Your nested loop creates a button for each product. If the productID is the same as the post ID, it's a delete button, otherwise it's an add button.

I think what you actually want to do is check whether the post ID is in the homeProduct array. If it is, you want a delete button; if not, you want an add button. You can use the some() function to tell if there's a match.

<% for (var i=0; i < loadPosts.length; i++) { %>
    <tr>
        <td><%= loadPosts[i].name %></td>
        <td><%= loadPosts[i].price %></td>
        <td><%= loadPosts[i].id %></td>

        <td>
            <% if (homeProduct.some(p => p.ProductId = loadPosts[i].id)) { %> 
                <button  class="btn btn-danger"><a style="color: white; 
                    cursor: pointer; text-decoration: none;" 
                    href="/deleteFromHomePage/<%= 
                    loadPosts[i]._id%>">DeleteFromHomePage</a></button>
            <% } else { %>
                <button  class="btn btn-primary"><a style="color: white; 
                     cursor: pointer; text-decoration: none;" 
                     href="/addToHomePage/<%= 
                     loadPosts[i]._id%>">AddToHomePage</a></button>
            <% } %>
        </td>   
        <td> 
            <button  class="btn btn-danger"><a style="color: white; 
                 cursor:pointer; text-decoration: none;" href="/delete/<%= 
                 loadPosts[i]._id%>">Delete</a></button>
        </td>
        
        
    </tr>
    
<% } %>