Increasing progress bar with jQuery

Question

I want to increase or decrease the width of an element as a progress bar using jQuery and JavaScript. I'm new to JavaScript and something is missing in my code to work.

Can anyone help me this to work? Thanks in advance!

$(document).ready(function(){
 var 
    width1 = $("#bar-one").width(),   
    width2 = $("#bar-two").width();
    
	$("#one").on("click", function(){
    $('#bar-one').css('width', width1 + '5%'),
    $('#bar-two').css('width', width2 - '5%');
	} else {
  	$('#bar-one').css('width', width1 - '5%'),
    $('#bar-two').css('width', width2 + '5%');
  });
  
  $("#two").on("click", function(){
    $('#bar-one').css('width', width1 + '10%'),
    $('#bar-two').css('width', width2 - '5%');
	} else {
  	$('#bar-one').css('width', width1 - '10%'),
    $('#bar-two').css('width', width2 + '5%');
  });
  
  $("#three").on("click", function(){
    $('#bar-one').css('width', width1 + '05%'),
    $('#bar-two').css('width', width2 - '15%');
	} else {
  	$('#bar-one').css('width', width1 - '5%'),
    $('#bar-two').css('width', width2 + '15%');
  });
})

.progress {
  width: 100%;
  height: 30px;
  background-color: silver;
}

#bar-one {
  background-color: blue;
  height: 30px;
}

#bar-two {
  background-color: red;
  height: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress">
    <div id="bar-one" style="width:30%"></div>
</div>
<br>
<div class="progress">
    <div id="bar-two" style="width:45%"></div>
</div>
<br>
<input id="one" type="checkbox">
<input id="two" type="checkbox">
<input id="three" type="checkbox">

Answer 1

Try this code

you get the error because of else without if condition

$(document).ready(function(){
 var width1 = $("#bar-one")[0].style.width.replace('%', '');  
  var width2 = $("#bar-two")[0].style.width.replace('%', '');

	$("#one").on("click", function(){
		if($(this).is(':checked')){
 var width1 = $("#bar-one")[0].style.width.replace('%', '');  
  var width2 = $("#bar-two")[0].style.width.replace('%', '');
		$('#bar-one').width((parseInt(width1)+5)+"%");
		$('#bar-two').width((parseInt(width2)-5)+"%");
		} else {
 var width1 = $("#bar-one")[0].style.width.replace('%', '');  
  var width2 = $("#bar-two")[0].style.width.replace('%', '');
		$('#bar-one').width((parseInt(width1)-5)+"%");
		$('#bar-two').width((parseInt(width2)+5)+"%");
		}
	});
  
  $("#two").on("click", function(){
	  if($(this).is(':checked')){
     var width1 = $("#bar-one")[0].style.width.replace('%', '');  
  var width2 = $("#bar-two")[0].style.width.replace('%', '');
    $('#bar-one').width((parseInt(width1) + 10)+"%");
    $('#bar-two').width((parseInt(width2)-5)+"%");
	} else {
   var width1 = $("#bar-one")[0].style.width.replace('%', '');  
  var width2 = $("#bar-two")[0].style.width.replace('%', '');
  	$('#bar-one').width((parseInt(width1) - 10)+"%");
    $('#bar-two').width((parseInt(width2)+5)+"%");
}
  });
  
  $("#three").on("click", function(){
	  if($(this).is(':checked')){
     var width1 = $("#bar-one")[0].style.width.replace('%', '');  
  var width2 = $("#bar-two")[0].style.width.replace('%', '');
    $('#bar-one').width((parseInt(width1)+5)+"%");
    $('#bar-two').width((parseInt(width2) - 15)+"%");
	} else {
   var width1 = $("#bar-one")[0].style.width.replace('%', '');  
  var width2 = $("#bar-two")[0].style.width.replace('%', '');
  	$('#bar-one').width((parseInt(width1)-5)+"%");
    $('#bar-two').width((parseInt(width2) + 15)+"%");
}
  });
  
});

.progress {
  width: 100%;
  height: 30px;
  background-color: silver;
}

#bar-one {
  background-color: blue;
  height: 30px;
  transition: width .6s linear
}

#bar-two {
  background-color: red;
  height: 30px;
  transition: width .6s linear
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress">
    <div id="bar-one" style="width:30%"></div>
</div>
<br>
<div class="progress">
    <div id="bar-two" style="width:45%"></div>
</div>
<br>
<input id="one" type="checkbox">
<input id="two" type="checkbox">
<input id="three" type="checkbox">