AngularJS Custom Directive Isolated Scope is not working - angularjs

Question

I'm trying to create a Spinner,
I have a custom directive in AngularJS
var app = angular.module('plunker', [])
.directive('spinner', function() {
return {
restrict: 'EA',
scope: {
jump:'=jump'
},
link: function (scope, element, attrs) {
scope.jump = 0;
scope.spinning = function(action) {
var jumps = document.getElementById("jumps").value;
var spinn = document.getElementById("spinn").innerText;
var convt = Number(spinn);
var jumpconvt = Number(jumps);
if(jumps === '' && action === "add") {
convt= convt +1;
}
else if(jumps === '' && action === "sub") {
convt= convt - 1;
}
else if(jumps !== '' && action === "sub") {
convt = convt - Number(jumps);
}
else{
convt = jumpconvt + convt;
}
document.getElementById("spinn").innerHTML = convt;
};
},
templateUrl: 'spinnerDirective.html'
};
});
in spinnerDirective.html will contain
<div>
<div> Jumps: <input type='text' id="jumps" ng-model='count'/> </div>
<div style="float: left; width:120px; margin-top:10px;" >
<div style="border-color: red; border-style: solid; border-width: 1px 1px 1px 1px; margin-left: 10px; text-align: center; height: 30px; line-height: 2px;" >
<label style="vertical-align: top;line-height: normal;" ng-click="spinning('add');" >+</label>
</div>
<div style="margin-top: -12px; text-align: center; height:12px;margin-left: 7px;">
<span id="spinn" style="background-color: #fff;font-size:18px;">{{jump}}</span>
</div>
<div style="border-color: red; border-style: solid; border-width: 0 1px 1px 1px; margin-left: 10px; text-align: center; height: 30px;line-height: 27px;">
<label style="vertical-align: bottom;line-height: normal;" ng-click="spinning('sub');">-</label>
</div>
</div>
</div>
Which will be rendered as:
<div>
<div>Spinner</div>
<div style="float: left;">
<spinner jump="jump"></spinner>
</div>
<div style="float: left;">
<spinner jump="jump"></spinner>
</div>
</div>
The problem is: if I use one spinner it works fine. But When I have multiple spinners it's not working, when i do click on + or - button in 2nd spinner, count is getting change in 1st spinner.
Result should be: onlick on + or - without giving any value in textbox, value should get increment or decrement by 1, and by giving value in textbox should get add or substract by textbox value.
when i do click on + or - button on 1st Spinner changes should happen only in 1st spinner and when i do click on + or - button on 2nd Spinner changes should happen only in 2nd spinner.
I have tried isolated scope in directive but still no effect.
Here's my code (Edit): Plunker
Please if someone could guide me how to do it right.
Thanks in advance.