引導程序模式中的引導程序顏色選擇器僅適用於表的第一行

Question

我有一個帶有數據表的表。 當您單擊一行時，它將打開一個模式來編輯該行。 在模型中，有一個帶有選色器的區域。 （COL2）

我的問題是，僅當單擊表的第一行時，顏色選擇器才起作用。

我認為解決方案是擁有一個可變字段名稱，但不知道如何實現。

這里是單擊表中的一行時打開的我的模態代碼：

            echo "<div class='modal fade' id='ModalEdit".$locations['id']."' tabindex='-1' role='dialog' aria-labelledby='myModalLabel'>";
                    echo "<div class='modal-dialog' role='document'>";
                        echo "<div class='modal-content'>";
                            echo "<form class='form-horizontal' method='POST' action='editLocation.php'>";      
                            echo "<div class='modal-header'>";
                                echo"<h4 class='modal-title' id='myModalLabel' >Locatie bewerken</h4>";
                            echo "</div>";

                            echo "<div class='modal-body'>  ";      

                                echo "<div class='form-group'>  ";       
                                    echo "<label for='titel' class='col-sm-2 control-label'>Locatie</label>";                   
                                    echo "<input type='text' name='locatie' class='form-control' id='locatie' value='".$locations['locatie']."' >";                   
                                echo "</div>";

                                echo "<div class='form-group'>";
                                    echo "<label for='detailtitel' class='col-sm-2 control-label'>Color</label>";                             
                                    echo "<input type='col2' class='form-control' id = 'col2' name='col2' value='".$locations['color']."' >";   
                                echo "</div>";

                                echo"<div class='form-group'>";                             
                                    echo"<input type='hidden' name='id' class='form-control' id='id' value='".$locations['id']."'>";
                                echo" </div>";          

                            echo"</div>";             
                            echo"<div class='modal-footer'>";
                                echo"<button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>";
                                echo"<button type='submit' class='btn btn-primary'>Save changes</button>";
                            echo" </div>";
                            echo"</form>";
                        echo"</div>";                   
                    echo"</div>";               
                echo"</div>";         

和加載顏色選擇器的腳本：

    $(function () {
        $('#col2').colorpicker({

        format: 'hex'
            });
             });

Answer 1

將ID更改為Class

ID是Unique

echo "<input type='col2' class='form-control colorpicker' id = '' name='col2' value='".$locations['color']."' >";

$(function () {
        $('.colorpicker').colorpicker({

        format: 'hex'
            });
             });

要么

在引導show modal event上調用colorpicker function