Use id's and classes in generated html

Use id's and classes in generated html

I have problem using the generated html from my jquery action. This was the idea: I have a form in which I can add fields on the fly with a button. I generate this fields by javascript so I don't have to reload the page all the time. See code below.

I also add a button to delete this fields. this buttons do have an id so I know which field I have to delete. But the problem is that the id's are not found. only if I put the function to delete the field in the function where I add the field it works but this is not what I want. Is there an solution for it?

  1. $("#add_orderline").click(function(){
            var orderline_id = parseInt($("#max_orderline_id").val()) + 1;

            var content ='<div class="orderline" id="orderline_'+orderline_id+'">\n\
                          <input class="lf orderline_field orderline_product_name" type="text" value="" name="product_name_'+orderline_id+'" id="product_name_'+orderline_id+'"/>\n\
                          <input class="sf orderline_field orderline_quantity" value="" type="text" name="quantity_'+orderline_id+'" id="quantity_'+orderline_id+'"/>\n\
                          <input class="sf orderline_field orderline_price" type="text" value="" name="price_'+orderline_id+'" id="price_'+orderline_id+'"/>\n\
                          <input class="sf orderline_field orderline_subtotal" value="" type="text" name="subtotal_'+orderline_id+'" id="subtotal_'+orderline_id+'"/>\n\
                          <div class="btn_no_text btn ui-state-default ui-corner-all tooltip delete_orderline" id="delete_orderline_'+orderline_id+'" title="verwijder orderregel">\n\
                            <span class="ui-icon ui-icon-trash"></span>\n\
                          </div>\n\
                       </div>';

            $("#orderlines").append(content);
        });