Firefox won't display my jquery added element, but Chrome will

Question

HEre is my function :

function addEventForm(jour){
    if(!$(".formEvent").length){
        jour.closest("tr").after("<form class='formEvent'><div class='curseur'></div></form>");
    }

    var percent = jour.offset().left-jour.closest("tr").offset().left+parseInt(jour.css("margin-left").replace("px", ""))+ parseInt(jour.css("padding-left").replace("px", ""))+parseInt(jour.css("border-left-width").replace("px", ""));
    $(".formEvent .curseur").css({"top" : "-15px" , "left": percent+"px"});
    $(".formEvent").show()
}

By invoking it on Chrome, everything is alright, but in Firefox, the element is added, but not shown. How to fix it ?

EDIT

Example : https://jsfiddle.net/g45r4um2/1/

Answer 1

I fixed it: https://jsfiddle.net/g45r4um2/13/ In firefox it doesn't understand where it has to be placed, so you have to add td and tr tags. Infact if you inspect element form in your code it is under tbody > form and seems firefox doesn't like elements under tbody alone.

jour.closest("tr").after("<tr><td><form class='formEvent'><div class='curseur'></div></form><td></tr>");