Multiple Accordians/Drop downs in the same section: Code and ID creation help

Site URL: https://bulldog-alpaca-kydk.squarespace.com/config/design/custom-css

I've trawled a few of the Accordian and drop down threads but struggling to find a fix. 

I have been able to create one accordian drop down with multiple sections but when I try to add a second or third it starts to play up.

The website will have three drinks flavours in the same section. Three Images, three descriptions and under each of these images there will be a drop down box listing the ingredients, storage and fact base info about the plant ingredients.

I have been able to successfully create the first but thwne i copy and mimic the code under the second image it ceasing to work.

I believe I need a specific ID code built into each code injection and markdown section and then in the CSS so it identifies each one, but I am very very new to coding and unsure how to insert and ID.

Code currently used which has been successful for one (This was taken from an online tutorial):

CSS:

.markdown-block h2 {
font-size: 22px;
background: hsl(323, 27%, 78%);
color: #FFFFFF;margin: 20px 0px;
}

.dropdown {
margin: 20px 0px;
}

.box {
padding: 10px;
outline: hsl(323, 27%, 78%) solid 3px;
outline-offset: 3px;
margin: auto 0px;
}

Code Injection

<script type="text/javascript"src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>

$(document).ready(function(){
$('.markdown-block .sqs-block-content .dropdown').css('cursor','pointer');
$(".markdown-block .sqs-block-content .dropdown").nextUntil(".dropdown").slideToggle();
$(".markdown-block .sqs-block-content .dropdown").click(function() {
$(this).nextUntil(".dropdown").slideToggle();
});
});
</script>

Markdown Block

<h2 class="dropdown box">This is the question<span style="text-align:right; float: right;">&darr;</span></h2>

> <p>*This is paragraph one of the answer.*</p>

> <div class ="dropdown"><p>*This is the second question*<span style="text-align:right; float: right;">&darr;</span></p></div>

>> <p>*This is a second dropdown.*</p>

> <div class ="dropdown"><p>*This is the third question*<span style="text-align:right; float: right;">&darr;</span></p></div>

>><p>*This is a third dropdown.*</p>

</br>

Any advise would be INCREDIBLE.

Warmest regards V

Whats the password?

I have an accordion plugin on my site, but I am not exactly sure what you are trying to do without seeing your page, so I am not sure if it will work.

Hi,

Please share the page you used this accordion and also please check this FREE NO-Coding accordion plugin. You can make any design you like in 30 Seconds.

Demo: https://www.sqsp.ixstudio.net/faq and download link is here.

Let me know please if you have any questions.

Please use the like button if it helps you!

Best,
Leopold

You can use this tool  or IXstudio tool to create accordions. It will be easier.

or use this free tool to add FAQ Accordion Dropdown.