jquery - Apend multiple variables -

i have got table:

<table>   <tr>     <th>name</th>     <td>paul stevenson</td>   </tr>     <tr>     <th>date</th>     <td>28. 09. 1978</td>   </tr> </table> 

and want add functions table:

var toolbar = $("<div />").css({   "padding": "5px",   "background" : "#f8f8f8",   "position" : "absolute",   "borderradius" : "5px", }) var link = $("<a />").css({     "display" : "block",     "height" : "17px",     "width" : "17px",     "position" : "relative"}).on("click", function() {   $(this).animate({bottom: "-2px"}, 20 ).animate({bottom: "0"}, 20 ); }); 

here toolbar , link. toolbar should append on mouse enter , has link inside it.

    $('th').on("mouseenter mouseleave", function(e) {           if (e.type === 'mouseenter') { $(this).append( toolbar ); }           else { $(this).find( $("div") ).remove() }         });  toolbar.html( gmaps ); 

there more types of link types. make this

var gmaps = link.css({ "background" : "red",}); var google = link.css({"background" : "blue",}); 

how can make append more link types?

toolbar.html( gmaps + google ); 

doesn't work. here codepen

you need make few modifications code follows:

1) create multiple link object via $.clone() avoid overwriting same dom element like:

var gmaps = link.clone().css({ "background" : "red",}); var google = link.clone().css({"background" : "blue",}); 

2) while adding these links toolbar; go $.append() function call appended @ bottom of same container follows:

toolbar.append( gmaps ).append( google );  

please have @ complete source code @ updated codepen link:

http://codepen.io/anon/pen/mepzxd?editors=0010