ID aan button hangen

Ik heb het volgende script dat tekstvelden in een formulier aanmaakt:

    <script>
	$(document).ready(function() {
    var max_fields      = 20; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID
    
    var x = 1; //initlal text box count
	  $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment 
			


				$.post( "shared/updateTitles.php", 
				{ newtitle: "newtitle", 
				draaiboekID: "<?php echo $draaiboekID; ?>", 
				itemID: "<?php echo $itemID; ?>", 
				userID: "<?php echo $userID; ?>" }
				).done(function( data ) {
					console.log( "Data Loaded: " + data );
					
					$(wrapper).append('<li class="drsubject ui-sortable-handle" id="arrayorder_'+data+'" titelid="'+data+'"><table><tr><td style="padding-left: 5px;"><img src="layout/images/cursor.png"></td><td style="padding-left: 5px;"><input id="'+data+'" type="time" name="titeltijd['+data+']" value="" class="form-control" style="width:100px;"></td><td style="padding-left: 5px;"><input id="'+data+'" type="text" name="titelnaam['+data+']" value="" placeholder="Naam" class="form-control" style="width:200px;"></td><td style="padding-left: 5px;"><input type="text" id="'+data+'" name="titelfunctie['+data+']" value="" placeholder="Functie" class="form-control" style="width:200px;"></td><td style="padding-left: 5px;"><a href="#" class="remove_field"><i class="fa fa-trash"></i> &nbsp;Verwijder</a></td></tr></table></li>'); //add input box
					
				  });
		
		            
			
        }
		
    });
    

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
	var titleID =  $(this).parents('li').attr('titelid');
    e.preventDefault(); $(this).parents('li').remove(); x--;
		
		
	$.post( "shared/updateTitles.php", { deletetitle: "deletetitle", titleID: titleID })
  .done(function( data ) {
    
  });
		
    })
	
});
</script>

Werkt helemaal. Probleem is dat niet alleen met de button-knop een titel wordt aangemaakt:

<button  class="add_field_button"><i class="fa fa-user"></i> &nbsp;NIEUWE TITEL</button>

Maar ook met al mijn andere buttons gebeurt dit, zoals met deze:

<button class="add_field_button" onclick="javascript:open_popup('shared/filemanager-playout/dialog.php?type=2&amp;popup=1&akey=7rX8457dRYdgnc9024xdJ')"><i class="fa fa-upload"></i> &nbsp;UPLOAD VIDEO'S</button>

Hoe kan ik voorkomen (denk met een ID?) dat al mijn buttons werken als insert voor het formulier?