jquery - jquery $(".class").append(var1,var2,var3,etc): 一部は動作しますが、一部は動作しません

Question

まず第一に、私はgpa計算機を作ろうとしています.これは私のjavascriptです:

<script>
var option_choose = document.createElement("option");
    option_choose.innerHTML = "Choose...";
    option_choose.value = -1;
var c1 = document.createElement("option");
    c1.innerHTML = "Math Standard 9"
    c1.value = 0;
var c2 = document.createElement("option");
    c2.innerHTML = "Math Higher 9"
    c2.value = 0.5; 
var c3 = document.createElement("option");
    c3.innerHTML = "English 9"
    c3.value = 0;
var c4 = document.createElement("option");
    c4.innerHTML = "History 9"
    c4.value = 0;
var c5 = document.createElement("option");
    c5.innerHTML = "Science 9";
    c5.value = 0;

var l1 = document.createElement("option");
    l1.innerHTML = "Japanese";
    l1.value = 0;
var l2 = document.createElement("option");
    l2.innerHTML = "French";
    l2.value = 0;

var e1 = document.createElement("option");
    e1.innerHTML = "Adv. Computers";
    e1.value = 0;

$(".core_subjects").append(option_choose,c1,c2,c3,c4,c5);
$(".language_subjects").append(option_choose,l1,l2);
$(".elective_subjects").append(option_choose,e1);
</script>

私のHTMLには、次のものがあります。

<div id="subject_name">
<h4>Class</h4>
<select id="core1" class="core_subjects">
    <option value="-1">Choose...</option>
</select>
<br/>
<select id="core2" class="core_subjects">
    <option value="-1">Choose...</option>
</select>
<br/>
<select id="core3" class="core_subjects">
    <option value="-1">Choose...</option>
</select>
<br/>
<select id="core4" class="core_subjects">
    <option value="-1">Choose...</option>
</select>
<br/>
<select id="language" class="language_subjects">
    <option value="-1">Choose...</option>
</select>
<br/>
<select id="elective1" class="elective_subjects">
    <option value="-1">Choose...</option>
</select>
<br/>
<select id="elective2" class="elective_subjects">
    <option value="-1">Choose...</option>
</select>
<br/>
<select id="elective3" class="elective_subjects">
    <option value="-1">Choose...</option>
</select>
<br/>
<select id="elective4" class="elective_subjects">
    <option value="-1">Choose...</option>
</select>
<br/>
</div>

つまり、基本的には、誰かがボタンをクリックすると JavaScript が実行され、選択するたびに、最初に「Choose...」オプションがあり、その後にクラスのリストが続くはずです。

しかし、なぜか、#core4 と #language の 2 つの選択で、「Choose...」が表示されません。他のすべてに表示されます。