I have three templates, of which one is the main template temp_main.

<template id="temp_main">
    <div class="">          
        //rest of the form
        <div class="" id="add_or_remove_button">    
            <!-- remove or add button   -->
        </div>
    </div>
</template>

<template id="temp_add_button">
    <a href="javascript:void(0);" class="add_button" title="Add">
    <img src="../img/add-icon.png"/ alt="Add"></a>
</template>

<template id="temp_remove_button">
    <a href="javascript:void(0);" class="remove_button" title="Remove">
    <img src="../img/remove-icon.png"/>             
</template>

One of the two other ones should be inserted into the <div id="add_or_remove_button"> depending on the case.

The main template I insert into a wrapper div by:

var wrapper = $('.wrapper');
var newInputLine = $("#temp_main").html();
var add_buttonHTML = $("#temp_add_button").html();  
var remove_buttonHTML = $("#temp_remove_button").html();    
$(wrapper).append(newInputLine);

How can I add either the add or the remove button to this template? I tried:

$("#temp_main").$("#add_or_remove_button").html(add_buttonHTML);

but that´s wrong and probably a bad solution

"Uncaught TypeError: $(...).$ is not a function"

EDIT: So it´s working. Is this a good practice?

 $(wrapper).append(newInputLine);
 $(".wrapper div:last-child #add_or_remove_button").append(add_buttonHTML);