Adding text boxes dynamically on button click using '.append()'.

index.js

$('.fa-times').on('click', function(){
  $(this).closest('li').remove();
});

index.less

.pleasantSortLI { list-style: none; height: 51px; }
#sortable { padding-left: 0; }
.pleasantTextBox { width: 80%; float: left; display: inline-block; }
#pleasantIcons { height: 41px; }
.fa-calendar, .fa-times, .fa-arrows { margin-top: 10px; margin-left: 5px; }

page.jade

#pagePleasantHome.page
	.content
		h4.centeredText Pleasant Activity Tool

		ul#sortable
			li.pleasantSortLI
				input(type='text', class='pleasantTextBox', placeholder='Add a pleasant activity')
				#pleasantIcons
					i.fa.fa-calendar
					i.fa.fa-times
					i.fa.fa-arrows

		button.btn.btn-default.form-control.button.trackit#pleasantAddBtn(type='button') Add Activity
		button.btn.btn-default.form-control.button.trackit#pleasantDoneBtn(type='button') Done

textbox.js

// Adds a text box and 3 FA icons on each btn click

function AddPleasantTextBox(){

	$('#sortable').append('<li class="pleasantSortLI"><input type="text" placeholder="Add a pleasant activity" 
		class="pleasantTextBox" /><div class="pleasantIcons"><i class="fa fa-calendar"></i><i class="fa fa-times">
		</i><i class="fa fa-arrows"></i></div></li>');

// When X or 'fa-times' icon is clicked, this LI is removed/deleted from DOM
	$('.fa-times').off();
	$('.fa-times').on('click', function(){
    $(this).closest('li').remove();
  });	
}