Rails的5股利動態選擇框和遠程DIV佈局問題

我建立了Rails中5，紅寶石2.4.0一個應用程序，並使用引導4阿爾法6Rails的5股利動態選擇框和遠程DIV佈局問題

我有一個動態的選擇框，當做出一個選擇後一個負載div下面顯示有關該項目的信息，問題是div的佈局，當我點擊一個選擇它顯示正確，當我點擊下一個選擇，它出現在第一個選擇項目下面。

我要實現的是一個基於初始設備選擇動態加載的單個div。

我不知道如何處理這個問題，而且對於javaScript和AJAX來說更新。

我selecctbox：

<div class="form-group"> 
    <label for="deviceSelect">Select Your <%= @manufacturer.name.titleize %> Device</label> 
    <select class="form-control div-toggle" data-target=".device-names"> 
    <option>Select Device</option> 
    <% @devices.each do |device| %> 
     <option value="<%= device.id %>" data-show=".<%= device.device_name %>"><%= device.device_name.titleize %></option> 
    <% end %> 
    </select> 
</div>

我的「動態格」：

<div class="device-names"> 
    <% @devices.each do |device_div| %> 
    <div class="<%= device_div.device_name %> invisible"> 
     <%= device_div.device_name %> 
    </div> 
    <% end %> 
</div>

我的javascript：

<script type="text/javascript"> 
     $(document).on('change', '.div-toggle', function() { 
     var target = $(this).data('target'); 
     var show = $("option:selected", this).data('show'); 
     $(target).children().addClass('invisible'); 
     $(show).removeClass('invisible'); 
     }); 
     $(d 

ocument).ready(function() { 
    $('.div-toggle').trigger('change'); 
    }); 
</script>

我想爲每一個設備加載其中Iconica文本位於下方的圖像的內容，至少這就是我的遊戲結束。