Displaying Collapse From A List Generated Using A Loop Only Works With First List Item

I am doing a project where I collect data from a JSON file and display a bit of it on my webpage. I get the info from a JSON file and display the data on my webpage using a loop on a list tags. The list tags basically have a collapse button and the div that displays the info. I've been able to get my data correctly so that isn't the problem. The problem is when I click the data-toggle buttons from my list that displays info, they all ONLY display the collapse of the first list item. Any suggestions on how to fix this?

Thank you all in advance

Here's my code:

<ul id="talk-display">
                
                <li>
                    <button data-toggle="collapse" data-target="#talk-answer" class="btn" id="talk-question">
                        <span class="glyphicon glyphicon-menu-down" style="float:left"></span>
                        
                        <br>
                        <span id="talk-name">By </span>
                    </button>

                    <div id="talk-answer" class="collapse">
                        <button class="btn" id="talk-reply">Reply</button>
                        <p id="talk-response"></p>
                    </div>
                </li>
                
            </ul>