How to optimize jquery code?

Question

JavaScript

hello everyone i have html code

<ul class="list-group services_check">
  <form method="POST">	
    <li class="list-group-item">
      <input id="text2" type="hidden" name="id_service[2]" value="0">
      <button id="but2" class="btn btn-default" type="button">
         <i class="icon-list-add"></i>
      </button>
      Услуга 1
    </li>
    <li class="list-group-item">
      <input id="text3" type="hidden" name="id_service[3]" value="0">
      <button id="but3" class="btn btn-default" type="button">
        <i class="icon-list-add"></i>
      </button>
      Услуга 2
    </li>
    <li class="list-group-item">	-//- -// -//</li>	
    <li class="list-group-item">	-//- -// -//</li>	
    и тд вплоть до 15 штук
  </form>
</ul>

There is also jquery code

$(document).ready(function() {
  $('.services_check button').click(function(){
    var my = $(this).find('i');
    if(my.hasClass('icon-check')){
      my.removeClass('icon-check').addClass('icon-list-add');		
      $("#but2").click(function(){$("#text2").val("1");});
      $("#but3").click(function(){$("#text3").val("1");});
      $("#but4").click(function(){$("#text4").val("1");});
    }
    else{
      my.addClass('icon-check').removeClass('icon-list-add');	
      $("#but2").click(function(){$("#text2").val("0");});
      $("#but3").click(function(){$("#text3").val("0");});
      $("#but4").click(function(){$("#text4").val("0");});
    }
    $(this).toggleClass('btn-primary').toggleClass('btn-default');
    $(this).blur();
  });
});

The question is how can I optimize it so as not to produce these constructions

$("#but2").click(function(){$("#text2").val("1");});
$("#but3").click(function(){$("#text3").val("1");});
$("#but4").click(function(){$("#text4").val("1");});

and

$("#but2").click(function(){$("#text2").val("0");});
$("#but3").click(function(){$("#text3").val("0");});
$("#but4").click(function(){$("#text4").val("0");});

Plus, they do not immediately work out switching value from 1 to 0

Answer 1

$(document).ready(function() {
  $('.services_check button').click(function(){
    var my = $(this).find('i');

    if(my.hasClass('icon-check')){
      my.removeClass('icon-check').addClass('icon-list-add');  
      $(this).prev().val("1");
    }
    else{
      my.addClass('icon-check').removeClass('icon-list-add');   
      $(this).prev().val("0");
    }

    $(this).toggleClass('btn-primary').toggleClass('btn-default');
    $(this).blur();
  });
});

Answer 2

Well, you can return an object when clicking , and look for the necessary "children" whose val needs to be changed.

Answer 3

$(document).ready(function() {
  $('.services_check button').click(function(){
    var my = $(this).find('i');
    if(my.hasClass('icon-check')){
      my.removeClass('icon-check').addClass('icon-list-add');		
      $('.services_check .list-group-item input').val("1");
    }
    else{
      my.addClass('icon-check').removeClass('icon-list-add');	
      $('.services_check  .list-group-item input').val("0");
    }
    $(this).toggleClass('btn-primary').toggleClass('btn-default');
    $(this).blur();
  });
});

does it work like that?
If there is some dependence on the current button (after the click), then you can go up .closest , something like

...
    if(my.hasClass('icon-check')){
      my.removeClass('icon-check').addClass('icon-list-add');		
      $(this).closest('.list-group-item').find('input').val("1");
    }
...