Even not firing

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div id="tasksTableDiv">
							<div class="row" id="1">
								<div id="description_1"
									class="col-sm-2 taskDescriptionCol">Description 1
                 </div>
								<div class="col-sm-1 removeTaskCol">
									<input id="button_1" class="removeTaskButton" type="button" value="X">
								</div>
							</div>

</div>

<button id="addTaskButton" type="button"
							class="btn btn-sm btn-primary">Add Task</button>

CSS

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

JavaScript

$('.removeTaskCol').on('click', function(){
		   console.log("Clicked X");
	});
  
  $('#addTaskButton').on('click',function() {
		$('#tasksTableDiv').append('<div class="row" id="2">'
								+ '<div id="description_2"'
									+ 'class="col-sm-2 taskDescriptionCol">Description 2'
                 + '</div>'
								+ '<div class="col-sm-1 removeTaskCol">'
									+ '<input id="button_2" class="removeTaskButton" type="button" value="X">'
								+ '</div>'
							+ '</div>');

	});