Need one div's input value to switch from true to false onclick and then revert onclick of another div

Vote count: 0

I have these buttons...which use the jqery knobs by Anthony Terrien http://ift.tt/JfcxXL

these buttons have jquery functions which Ive added and are already working which toggle certain styles (display this box shadow /don't display it, etc.)

however I now need to hide/display a value of an input field

So it looks like this:

<div id="button"><input class="knob" value="80" data-displayInput="true"/></div>
<div id="button"><input class="knob" value="60" data-displayInput="true"/></div>
<div id="button"><input class="knob" value="40" data-displayInput="true"/></div>
<div id="button"><input class="knob" value="20" data-displayInput="true"/></div>

When one div is clicked the input val "data-displayInput" should be false, When a DIFFERENT one of these buttons is clicked (not the same one) it should return to true, and the next one should be false.

I tried the following:

$('#button').on('click', function() {
    var hiddenField = $('#data-displayInput'),
        val = hiddenField.val();

    hiddenField.val(val === "true" ? "false" : "true");
    console.log("new value: " + hiddenField.val());
});

Just not really sure what I'm missing. Note it has to be a click on the button and NOT on the Input itself.

asked 31 secs ago

rubixkube
3

Need one div's input value to switch from true to false onclick and then revert onclick of another div