使用id将val（）设置为元素但在获取值时不能识别表达式错误

Question

我有多个面板，可以使用ajax进行编辑。单击编辑时，它会显示面板的ID和其他面板详细信息。然后将它传递给模态并调用ajax函数。直到这个没有问题。问题是将编辑后的值更新到面板。

<div class="panel" id="{{$candidate->id}}">
   <div class="card_details">
    <b><p id = "card_phone">{{$candidate->phone}}</p></b>
    <b><small id="card_email">{{$candidate->email}}</small></b><br><br>
   </div>
</div>

{{candidate-＆gt; id}}对于每个面板都不同。我能够像这样使用jquery获取面板内的数据

var panel = $('div#'+candidate_id+'.panel');
var name = panel.find('p#card_name').text();
var phone = panel.find('div.card_details p#card_phone').text();
var email = panel.find('div.card_details small#card_email').text();

但是当我尝试在同一个面板上设置更新时，我会收到错误

  

无法识别的表达式：div＃[object HTMLInputElement] .panel

function updateCandidateDetails(data,can_id){

var candidate_id = can_id;

$.each(data,function(key,value){
    $.each(value,function(index,titleObj){

    var updated_name = titleObj.name;
    var updated_phone = titleObj.phone;
    var updated_email = titleObj.email;
    });
});

 var panel = $('div#'+candidate_id+'.panel');
 panel.find('p#card_name').val(updated_name);                
 panel.find('div.card_details p#card_phone').val(updated_phone);               
 panel.find('div.card_details small#card_email').val(updated_email);

}

为什么在获取值时不会抛出错误，但在更新值时会抛出错误？