Проблема в редакторе окна ввода JQuery/PHP

Question

У меня возникла проблема с нажатием кнопки редактирования для перемещения данных метки для ввода текстовых данных!

Когда я нажимаю кнопку редактирования, эти данные заменяются текстовым полем ввода im, используя jquery hide/show! его рабочий тон для первой строки im, способный обновляться в mysql db !!. , когда я нажимаю кнопку редактирования для ввода 2-го и 3-го ряда, texbox появляется в 1-й строке, и когда я нажимаю кнопку отмены для 2-й и 3-й строки, ее заменяет идентификатор таблицы mysql.

Любая помощь доступна, спасибо!

Bootstrap/PHP код

Я выборки данных из БД MySQL

if(isset($_POST['display'])) 
{ 
    $sql = "select * from demo"; 
    $result = mysql_query($sql); 
    while($row = mysql_fetch_object($result)) 
    {  
    ?> 
    <div class='container'> 
     <div class='row'> 
      <div class='col-md-4'> 
       <label style="display:block-inline;" class="feed_label" id="feed_label" idl='<?php echo $row->id;?>'> 
        <?php echo $row->url; ?> 
       </label> 
       <input name="url1" class="form-control url1" value="<?php echo $row->id;?>" id="url1" type="text" style="display:none;"> 
      </div> 
      <div class='col-md-2'> 
        <a ide='<?php echo $row->id;?>' id="edit" class='edit' href="#" style="display:block-inline;">EDIT</a> 
        <a idc='<?php echo $row->id;?>' id="cancel" class='cancel btn btn-warning btn-sm' href='#' style='display:none;'>CANCEL</a> 
      </div> 
     </div> 
    </div> 
    <?php 
    } 
    exit(); 
} 

JQuery код для Замена этикетки для ввода текста и наоборот

$('body').delegate('#edit','click',function(){ 
    $('#feed_label').hide(); 
    $('#url1').show(); 
}); 
$('#cancel').click(function(){ 
    $('#feed_label').show(); 
    $('#url1').hide(); 
}); 

Answer 1

вы имеют несколько элементов с одинаковыми (id = "edit", id = "cancle" и id = "feed_label"). Помните, что этот идентификатор должен быть уникальным через ваш html-документ. попробуйте вместо этого:

Js:

$('.edit').on('click', function(e){ 
var btn = jQuery(e.delegateTarget); 
    var id = btn.attr('rid'); 
    $('#feed_label'+id).hide(); 
    $('#url'+id).show(); 
}); 

$('.cancel').on('click', function(e){ 
    var btn = jQuery(e.delegateTarget); 
    var id = btn.attr('rid'); 
    $('#feed_label'+id).show(); 
    $('#url'+id).hide(); 
}); 

PHP:

<?php 
if(isset($_POST['display'])) { 
    $sql = "select * from demo"; 
    $result = mysql_query($sql); 
    while($row = mysql_fetch_object($result)) { 
     echo '<div class="container">'. 
      '<div class="row">'. 
       '<div class="col-md-4">'. 
        '<label style="display:block-inline;" class="feed_label" id="feed_label'.$row->id.'">'. 
         $row->url. 
        '</label>'. 
        '<input name="url1" class="form-control url1" value="'.$row->id.'" id="url'.$row->id.'" type="text" style="display:none;">'. 
       '</div>'. 
       '<div class="col-md-2">'. 
        '<a rid="'.$row->id.'" class="edit" href="#" style="display:block-inline;">EDIT</a>'. 
        '<a rid="'.$row->id.'" class="cancel btn btn-warning btn-sm" href="#" style="display:none;">CANCEL</a>'. 
       '</div>'. 
      '</div>'. 
     '</div>'; 
    } 
    exit(); 
} 
?>