[Opgelost]/[jquery/ajax]Snelle instelling menu

Ik ben bezig een balk aan de onderkant te maken met opties.
Hier kan een gebruiker dan de balk zelf samenstellen d.m.v. het menu.

Het probleem waar ik nu mee zit is, dat dit enkel eenmalig uitgevoerd kan worden.
Dus bijvoorbeeld je hebt een optie aan staan, dan kan deze alleen maar uit en andersom.



Het menu is nog niet werkend dus de opties die aan- en uitstaan kloppen niet met de balk eronder.

javascript.php heeft nog geen functie, dus toevoegen heeft weinig zin. Het zet bij iedere optie een ander woordje in de balk om te testen.

$(document).ready(function() {
	// Hang een event listener voor het klik event aan de class .ajaxableVar
	$('.put_on').click(function(){
		//this.setAttribute("class", "put_off");
		$.ajax({
			// In dit geval wil ik een post maar het kan ook met bijv. GET variabelen
			type: "POST",
			// De data die we willen posten als variabel ajaxableVar is de inhoud van
			// this (in dit geval dus de inhoud van het element waarop we geklikt hebben)
			data: ({optie : $(this).val()}),
			// Het url waarnaar de AJAX request gaat
			url: 'js/javascript.php',
			success: function(data) {
				// We plaatsen het resultaat van de call als content van de div
				// #ajaxResult
				$('#Check').html(data);
			}
		});
		$(this).css({"background-image":"url(images/icon_unchecked.png)"});
	});
	$('.put_off').click(function(){
		//this.setAttribute("class", "put_on");
		$.ajax({
			// In dit geval wil ik een post maar het kan ook met bijv. GET variabelen
			type: "POST",
			// De data die we willen posten als variabel ajaxableVar is de inhoud van
			// this (in dit geval dus de inhoud van het element waarop we geklikt hebben)
			data: ({optie : $(this).val()}),
			// Het url waarnaar de AJAX request gaat
			url: 'js/javascript.php',
			success: function(data) {
				// We plaatsen het resultaat van de call als content van de div
				// #ajaxResult
				$('#Check').html(data);
			}
		});
		$(this).css({"background-image":"url(images/icon_checked.png)"});
	});
}); 

<div id="settings" style="display: block;">
   <ul>
      <li>
         &nbsp;&nbsp;Instellingen
      </li>
      <li>
         <input id="1" class="put_on" style="background: url(images/icon_checked.png) right no-repeat;" type="button" name="Users" value="Users" />
      </li>
      <li>
         <input id="2" class="put_off" style="background: url(images/icon_unchecked.png) right no-repeat;" type="button" name="Website link" value="Website link" />
      </li>
      <li>
         <input id="3" class="put_on" style="background: url(images/icon_checked.png) right no-repeat;" type="button" name="Status" value="Status" />
      </li>
   </ul>
</div> 

EDIT:
Code tags toegevoegd