Django & X-editable does not function - django

Question

I am trying to apply X-editable with bootstrap in my django template.
I follow the basic tutorial from this link https://vitalets.github.io/x-editable/docs.html
and I have created my main.js file that has got javascript in it.
I have placed right code in my template but when I click on username and try to edit it nothing happens.
any ideas why ?
part of my template code :::
</table>
<div class="container">
<h1>X-editable starter template</h1>
<div>
<span>Username:</span>
superuser
</div>
<div>
<span>Status:</span>
Status Test
</div>
</div>
<!-- bootstrap -->
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
<script src="{% static 'js/jquery-2.0.3.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<!-- x-editable (bootstrap version) -->
<link href="{% static 'css/bootstrap-editable.css' %}" rel="stylesheet"/>
<script src="{% static 'js/bootstrap-editable.min.js' %}"></script>
<!-- main.js -->
<script src="{% static 'js/main.js' %}"></script>
<script src="{% static 'js/collapse.js' %}"></script>
{% endblock %}
and javascript file:
$(document).ready(function() {
//toggle `popup` / `inline` mode
$.fn.editable.defaults.mode = 'popup';
$('#username').editable({
type: 'text',
title: 'Enter username',
success: function(response, newValue) {
userModel.set('username', newValue); //update backbone model
}
});
//make status editable
$('#status').editable({
type: 'select',
title: 'Select status',
placement: 'right',
value: 2,
source: [
{value: 1, text: 'status 1'},
{value: 2, text: 'status 2'},
{value: 3, text: 'status 3'}
]
/*
//uncomment these lines to send data on server
,pk: 1
,url: '/post'
*/
});
});