jQuery append（）更改HTML

Question

I am trying to make table with dynamically added rows. The problem is that each row is a form row, with several inputs. I had the PHP function which generate proper row and i manage to send it through $.post() to script. I checked, the code is loading properly. But when i use .append(), select inputs in my html gone crazy. Effect is on photo: Visual effect

The funny thing is that first row is made from the same function as second one. But first is added by PHP and second by .append(). Line before .append() html looks ok by on site, when i checked in site source, the marker in each select went before first . I have no idea how it is possible or what can i do with that. Here is my script function which should append new row:

function addRow(){
    var id = $("#id").val();
    var adres = $("#for_ajax").val() + "/inzynierka/ajax_scripts.php";
    $.post(adres,{'funkcja' : 'getTableRow', 'id' : id},function(output){
        $('#ideas_table').append(output);
    });
}

I note that output is how it should be.

This is what it looks like:

<tr><td><input class='form-control' type='text' name='name__1' value='Nowy pomysł'/></td><td>
                <select class='form-control' name='wplyw_na_dzialalnosc_biznesowa__1'/><option value='0.734956844'>BW</option><option value='0.54471179'>W</option><option value='0.274019206' selected='selected' >P</option><option value='0.12578418'>N</option><option value='0.060919681'>BN</option></select></td><td>
                <select class='form-control' name='wplyw_na_klientow__1'/><option value='0.734956844'>BW</option><option value='0.54471179'>W</option><option value='0.274019206' selected='selected' >P</option><option value='0.12578418'>N</option><option value='0.060919681'>BN</option></select></td><td><div class='input-group'><input type='text' class='form-control' name='cena__1' value='0'/><div class='input-group-addon'>PLN</div></div></td><td><div class='input-group'><input type='text' class='form-control' name='czas_wykonania__1' value='0'/><div class='input-group-addon'>Godzin</div></div></td><td><div class='input-group'><input type='text' class='form-control' name='planowany_przychod_miesieczny__1' value='0'/><div class='input-group-addon'>PLN</div></div></td><td>
                <select class='form-control' name='dopasowanie_do_wizji_firmy__1'/><option value='0.734956844'>BW</option><option value='0.54471179'>W</option><option value='0.274019206' selected='selected' >P</option><option value='0.12578418'>N</option><option value='0.060919681'>BN</option></select></td><td><input class='form-control' type='text' name='opinia_uzytkownikow__1' value='BN' readonly /></td><td><button type='button' class='btn btn-danger remove_row'><span class='glyphicon glyphicon-remove-circle' aria-hidden='true'></span> Usuń</button><input type='hidden' id='id' value='1'/></td></tr>

Answer 1

I couldn't understand your question completely but I aasume you are trying to make dynamic rows but can't make them.I suppose you should pass the whole html in the append function to add rows. Like :

$('#tableID').append('<tr>.....</tr>')

convert your outputhtml to a string and then pass into the function