Update 6 text boxes with 1 slider by clicking on each box to chose which one to update

Question

I am trying to create a form with 6 text inputs in which their values is updated by a slider.

I dont have problem doing this however, I need to make each boxes to be active just when it is clicked deactivating the other ones and keep their values.

I have been trying to do it with this function:

$(document).ready(function() { 

var slider = document.getElementById('slider');
var box = document.getElementById("box");
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var box3 = document.getElementById("box3");
var box4 = document.getElementById("box4");
var box5 = document.getElementById("box5");    

    slider.onchange = function(){
    box.value = '1 = ' + slider.value;
}

$('#box1').click(function(){
  $(this).data('clicked', true);
});

if($('#box1').data('clicked')) {
    slider.onchange = function(){
    box1.value = '2 = ' + slider.value;
}
} else {
    box.value;
}

});

http://jsfiddle.net/j3hEV/2/

Any suggestions on how to do this?

thanks a lot

Answer 1

Try

html

 <input type="text" id="box" data-clicked="1" value="1 = 0.00 " readonly><br>
 <input type="text" id="box1" data-clicked="2" value="2 = 0.00 +" readonly><br>
 <input type="text" id="box2" data-clicked="3" value="3 = 0.00 +" readonly><br>
 <input type="text" id="box3" data-clicked="4" value="4 = 0.00 +" readonly><br>
 <input type="text" id="box4" data-clicked="5" value="5 = 0.00 +" readonly><br>
 <input type="text" id="box5" data-clicked="6" value="6 = 0.00 +" readonly><br>

js

$(document).ready(function() {           
  var slider = $("#slider"); 
  var boxes = $("[data-clicked]");     
  $(boxes).on("click", function(e) {
    $(boxes).removeClass("clicked");
    $(e.target).addClass("clicked");  
  });        
  $(slider).on("change", $(boxes), function(e) {         
    $(".clicked")
    .val( $(".clicked").data("clicked")+ " = " + $(slider).val() );
  });
});

jsfiddle http://jsfiddle.net/guest271314/f86nQ/