Jquery loading only first class dropdown menu when using .load

Ok, here's my issue. I am loading dropdown data from a .txt file to an ID. This particular ID sits in 4 classes, broken by divs for layout purposes

$("#dropdown").load("ddData/data.txt");

<d开发者_JAVA技巧iv class="Class1">
Dropdown: <select id="SHCC" value="Dropdown"></select></div><br/>

<div class="Class2">
Dropdown: <select id="SHCC" value="Dropdown"></select></div><br/>

<div class="Class3">
Dropdown: <select id="SHCC" value="Dropdown"></select></div><br/>

<div class="Class4">
Dropdown: <select id="SHCC" value="Dropdown"></select></div><br/>

This is just a generic example, and I have a reason for doing it this way, but for some reason, only class1 gets loaded with dropdown data, the other classes do not get loaded.

Is there an alternative way to load data into drop down menus to keep all data static in each class instead of hardcoding it all in HTML?

Thanks.

Id's are supposed to be unique. Change the ID to a class and you should get the expected behavior,

$(".dropdown").load("ddData/data.txt");

<div class="Class1">
Dropdown: <select class="SHCC" value="Dropdown"></select></div><br/>

<div class="Class2">
Dropdown: <select class="SHCC" value="Dropdown"></select></div><br/>

<div class="Class3">
Dropdown: <select class="SHCC" value="Dropdown"></select></div><br/>

<div class="Class4">
Dropdown: <select class="SHCC" value="Dropdown"></select></div><br/>