jQuery append（）更改HTML

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>

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

As I observed in you HTML content,

You are closing tag Look at the line

<select class="form-control" name="wplyw_na_dzialalnosc_biznesowa__1"/>

This must be like

<select class="form-control" name="wplyw_na_dzialalnosc_biznesowa__1">

Remove last / at end of each start tag of select

Your JS will work as it is.

I hope this will solve you problem