I cannot seem to find an answer to this question, hopefully one of you generous people can help out. I am trying to insert multiple toggle functions with content under each button that is hidden or shown only when clicking each respective +/ - button. However, with this code, only the content under the first button seems to show/disappear. Thank you in advance!

<button onclick="toggleContent()">+/-</button><b> Goals</b>
<div ID="content" style="display:block;">
<br/>
<ul>
<li> - Develop, maintain, and publish Chart of Accounts segment definitions, segment values and descriptions, and standards for their application to HPHC financial transactions that need to be recorded in the General Ledgers (either the Corporate Book or the Provider Book.)</li>
<li> - Provide business direction on Chart of Account segment value derivation and assignment as it relates to financial transactions generated from new business ventures, new products, system development and data integration initiatives.</li>
<li> - Administer change management controls and associated notification procedures when:</li>
<li> - Additions/changes are made to segment values of the Chart of Accounts</li>
<li> - Additions /modifications are made to all Financial Management System (FMS)* financial transaction mapping documents which support journal entries, R5, AR, etc.</li>
<li>Define, maintain and publish metrics (yet to be defined).</li></ul>
<br/>
* Including the Oracle eBusiness Suite of products as well as the various ODS (Operational Data Store) applications that produce transactions that are interfaced into the Oracle eBusiness suite.
</div>
<div>
<script type="text/javascript">
function toggleContent() {
// Get the DOM reference
var contentId = document.getElementById("content");
// Toggle
contentId.style.display == "block" ? contentId.style.display = "none" :
contentId.style.display = "block";
}
</script>
<br/>
<style>
<!--
.tab { margin-left: 50px; }
-->
</style>
</div>
</div>
<button onclick="toggleContent()">+/-</button><b> Scope</b><br/>
<h3>Responsibilities<h3>
<div ID="content" style="display:block;">
<ul>
<li> - Provide business direction on Chart of Accounts segment definition, values and their application to HPHC financial transactions. </li>
<li> - Provide clarification as needed to business stakeholders on existing Chart of Account segment definitions and values. </li>
<li> - Provide business oversight to the FMS mapping documents which support journal entries relating to the General Ledger, R5 Application, Accounts Receivable, HPI, United, etc. </li>
<li> - Ensure all mapping documents are up to date, accurate and readily available to stakeholders.</li>
<li> - Administer change management procedures (identify need for modifications in response to business initiatives, receive approval for needed changes, and oversee activities associated with applying these changes within the Financial Management System). </li>
<li> - <p class="tab">Lead discussions on the use of the Chart of Accounts:</p></li>
<li> - <p class="tab"> Identify deficiencies in existing Chart of Account segment descriptions and definitions, identify options for their resolution, and propose solutions.</p></li>
<li> - <p class="tab"> Participate in impact assessments of proposed Chart of Account changes to downstream dependent processes and systems (HR, budget management, etc.)</p></li>
<li> - <p class="tab"> Evaluate new business initiatives (i.e., business model changes, new product launches, and technical development initiatives) relative to Chart of Account assignment and financial/analytic reporting needs.</p></li>
<li> - <p class="tab"> Ensure that newly proposed mapping meets financial operations and corporate reporting needs.</p></li>
</ul>
<br/>
</div>
<script type="text/javascript">
function toggleContent() {
// Get the DOM reference
var contentId = document.getElementById("content");
// Toggle
contentId.style.display == "block" ? contentId.style.display = "none" :
contentId.style.display = "block";
}
</script>
</div>