php - jQuery が正しいクラス要素を返さないのはなぜですか?

Question

次のように、特定の ID を持つ要素のクラスを取得しようとしています。「新規追加」オプションを使用して 2 つのドロップダウンを生成する複数のフィールドを用意しますが、オプションのクラスが異なります。最初のケースでは「animal_species」、2 番目のケースでは「animal_condition」です。ドロップダウンで [新規追加] を選択すると、ドロップダウンに新しいオプションを入力するためのテキスト フィールドを含むモーダル ウィンドウがポップアップします。モーダルウィンドウは次のとおりです。

  <!-- add-new field -->
  <div class="modal small hide fade" id="add-new" tabindex="-1" role="dialog" aria-labelledby="add-new-fieldLabel" aria-hidden="true">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">√ó&lt;/button>
        <h3 id="add-new-fieldLabel">Add New Field</h3>
      </div>
      <div class="modal-body">

          <p>Would you like to add a new item?</p>
          <input type="text" id="add-new-text" name="add-new-text" placeholder="Type the new option">

      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-success" id="add-new-submit" name="add-new-submit"/>Add</button>
      </div>
 </div><!-- /add-new field -->

テキストフィールドのjQueryは

      $('#upload_form option[value="addnew"]').click(function(){

          // Show modal window
          $('#add-new').modal('show');

          $('#add-new-submit').on('click', function(){                

              // Get new option from text field
              var value = $('#add-new-text').val();
              console.log(value);

              // Get the class
              //var Classofentry = $('#upload_form option[class]').attr("class");
              var Classofentry = $('#upload_form option[class]').attr("class");
              console.log(Classofentry);

              $.ajax({
                    type: "POST",
                    url: "<?php echo site_url(); ?>main/change_options",
                    data: {new_option: value, new_option_class: Classofentry},
                    dataType: "html",
                    error: errorHandler,
                    success: success
                  });

              function success(data){

                  //$('#animal_species').append("<option value='" + data + "'selected=\"selected\">" + data + "</option>"); // This might work ...
                  $('#'+Classofentry).append("<option value='" + data + "'selected=\"selected\">" + data + "</option>"); // This might work ...
                  alert(data);

                  //alert('Success!');

              }

              function errorHandler(){
                  alert('Error with AJAX!');
              }                              

              $('#add-new').modal('toggle');                              
           });

      }); 

  </script>

2 番目の「動物の状態」要素を追加したことを除いて、これはかなりうまく機能します。モーダルに入力されたテキストは最初の (「動物種」) 要素に入れられます。モーダルを生成する要素のクラス。jQueryでそのクラスにアクセスするにはどうすればよいですか? それとも、複数のフィールドに対して別の実装が必要ですか? 多くのことを試してきましたが、まだ何もうまくいきません。ヘルプ！

これが私がそれを機能させる方法です（コメントをありがとう！）：

  <script type="text/javascript">

      $('#upload_form option[value="addnew"]').click(function(){

          // Show modal window
          $('#add-new').modal('show');

          // Get the class
          //var Classofentry = $('#upload_form option[class]').attr("class");
          var Classofentry = $(this).attr("class");
          console.log(Classofentry);

          $('#add-new-submit').on('click', function(){                

              // Get new option from text field
              var value = $('#add-new-text').val();
              console.log(value);

              $.ajax({
                    type: "POST",
                    url: "<?php echo site_url(); ?>main/change_options",
                    data: {new_option: value, new_option_class: Classofentry},
                    dataType: "html",
                    error: errorHandler,
                    success: success
                  });

              function success(data){

                  //$('#animal_species').append("<option value='" + data + "'selected=\"selected\">" + data + "</option>"); // This might work ...
                  $('#'+Classofentry).append("<option value='" + data + "'selected=\"selected\">" + data + "</option>"); // This might work ...
                  alert(data);

                  //alert('Success!');

              }

              function errorHandler(){
                  alert('Error with AJAX!');
              }                              

              $('#add-new').modal('toggle');                              
           });

      }); 

  </script>

$(this) 要素を上に移動して、選択したオプションにアクセスしました。