如何使用jquery在文本框中设置多个值

Question

I have a text box. When I click on the listed data (Data is getting from table). I need to set response table row ID in text box.

I need data to set like this "|13456|1400|14567|" in the text box. Please help me to set id in text box. Currently I can set only one ID. Please find the attached image

JS

$.post("getDetailsAjax.php", {keywords: keywords}, function(data){ 
    $.each(data, function() {
        var leftboxid = this.id;
        var producer = this.producer;
        var model = this.model;
        var typ = this.typ;
        var body = this.body;
        var date_from = this.date_from;
        var date_to = this.date_to;
        var power = this.power;
        var engine_code = this.engine_code;
        var fuel = this.fuel;
        var ccm = this.ccm;
        var cylinders = this.cylinders;
        $('#search-result').append('<div class="leftboxid_'+leftboxid+'" data-leftbox="' +leftboxid+ '"><a href="#" class="list-group-item"><p class="list-group-item-text">' +producer+ ' '+model+' '+typ+' ('+body+')</p><p class="list-group-item-text">' +date_from+ ' to ' +date_to+ '</p> <p class="list-group-item-text">' +power+'  ps .' +engine_code+' . ' +fuel+ ' . '+ccm+' ccm . ' +cylinders+ ' cyl</p></div>');
        /* right box */
        $(".leftboxid_"+leftboxid).on("click", function(){
            var setID = $(this).attr("data-leftbox");
            $(".append-left-id").attr("value", setID);
        });
    });
}, "json");

Textbox

<div class="col-xs-4">
    <input type="text" class="form-control append-left-id" placeholder="Result Field">
</div>

Answer 1

I think you want this

instead of this code:

$(".leftboxid_"+leftboxid).on("click", function(){
    var setID = $(this).attr("data-leftbox");
    $(".append-left-id").attr("value", setID);
});

use this :

$(".leftboxid_"+leftboxid).on("click", function(){
    var setID = $(this).attr("data-leftbox");
    $(".append-left-id").val($(".append-left-id").val()+"|"+setID);
});