Simplification page avec boucle

Bonjour, je suis sur un projet de domotique avec micro contrôleurs , ....
je peux piloter des relais a partir d'une page html qui m'affiche les températures , ....
En fait tout fonctionne mais j'aimerais simplifier ma page html car j'ai 32 sorties à piloter et j'aimerais savoir si il y aurais possibilité d' inclure des boucles for... Si quelqu’un aurait une piste ... Merci, je joins ma page avec juste 4 sorties mais en réalité il y en a 32.

<!DOCTYPE html>
<html>
<head> 
<script src="jquery-3.3.1.min.js"></script>


<script>
$(document).ready(function() {

/////////////////////1///////////////  
$("#on1").click(function(){
 var ID = "on";
 var out = "01";
 $.ajax({
  url: "/cgi-bin/ajax/stackCGI/control-all.py",
  type: "POST",
  data: { 'data_id': ID , 'data_out': out },
  success: function(response){
   $("#resultat1").html(response);
  }
 });
                   
})
               
$("#auto1").click(function(){
 var ID = "auto";
 var out = "01";
 $.ajax({
  url: "/cgi-bin/ajax/stackCGI/control-all.py",
  type: "POST",
  data: { 'data_id': ID , 'data_out': out },
  success: function(response){
   $("#resultat1").html(response);
  }
 });
})
                
$("#off1").click(function(){
 var ID = "off";
 var out = "01";
 $.ajax({
  url: "/cgi-bin/ajax/stackCGI/control-all.py",
  type: "POST",
  data: { 'data_id': ID , 'data_out': out },
  success: function(response){
   $("#resultat1").html(response);
  }
 });
})

////////////////////2///////////////  
$("#on2").click(function(){
 var ID = "on";
 var out = "02";
 $.ajax({
  url: "/cgi-bin/ajax/stackCGI/control-all.py",
  type: "POST",
  data: { 'data_id': ID , 'data_out': out },
  success: function(response){
   $("#resultat2").html(response);
  }
 });
                   
})
               
$("#auto2").click(function(){
 var ID = "auto";
 var out = "02";
 $.ajax({
  url: "/cgi-bin/ajax/stackCGI/control-all.py",
  type: "POST",
  data: { 'data_id': ID , 'data_out': out },
  success: function(response){
   $("#resultat2").html(response);
  }
 });
})
                
$("#off2").click(function(){
 var ID = "off";
 var out = "02";
 $.ajax({
  url: "/cgi-bin/ajax/stackCGI/control-all.py",
  type: "POST",
  data: { 'data_id': ID , 'data_out': out },
  success: function(response){
   $("#resultat2").html(response);
  }
 });
})

/////////////////////3///////////////  
$("#on3").click(function(){
 var ID = "on";
 var out = "03";
 $.ajax({
  url: "/cgi-bin/ajax/stackCGI/control-all.py",
  type: "POST",
  data: { 'data_id': ID , 'data_out': out },
  success: function(response){
   $("#resultat3").html(response);
  }
 });
                   
})
               
$("#auto3").click(function(){
 var ID = "auto";
 var out = "03";
 $.ajax({
  url: "/cgi-bin/ajax/stackCGI/control-all.py",
  type: "POST",
  data: { 'data_id': ID , 'data_out': out },
  success: function(response){
   $("#resultat3").html(response);
  }
 });
})
                
$("#off3").click(function(){
 var ID = "off";
 var out = "03";
 $.ajax({
  url: "/cgi-bin/ajax/stackCGI/control-all.py",
  type: "POST",
  data: { 'data_id': ID , 'data_out': out },
  success: function(response){
   $("#resultat3").html(response);
  }
 });
})

/////////////////////4///////////////  
$("#on4").click(function(){
 var ID = "on";
 var out = "04";
 $.ajax({
  url: "/cgi-bin/ajax/stackCGI/control-all.py",
  type: "POST",
  data: { 'data_id': ID , 'data_out': out },
  success: function(response){
   $("#resultat4").html(response);
  }
 });
                   
})
               
$("#auto4").click(function(){
 var ID = "auto";
 var out = "04";
 $.ajax({
  url: "/cgi-bin/ajax/stackCGI/control-all.py",
  type: "POST",
  data: { 'data_id': ID , 'data_out': out },
  success: function(response){
   $("#resultat4").html(response);
  }
 });
})
                
$("#off4").click(function(){
 var ID = "off";
 var out = "04";
 $.ajax({
  url: "/cgi-bin/ajax/stackCGI/control-all.py",
  type: "POST",
  data: { 'data_id': ID , 'data_out': out },
  success: function(response){
   $("#resultat4").html(response);
  }
 });
})

})
</script>
</head>
    
<style type="text/css">
<!--
div#data {
    background-color: rgba(255,255,255,0.9);
}
div {
    background-color: rgba(255,255,255,0.6);
}
button {
    background-color: rgba(255,255,255,0.9);
}
</style>


<div class="excontainer">
<div id="data"></div>
<br /> 
<div> out1 </div>
 <button id="on1" >on</button>
 <button id="auto1" >auto</button>
 <button id="off1" >off</button>
  <div id="1"></div>
  
<div class="excontainer">
<div id="resultat1"></div> 
</div>
<br /> 

<div> out2 </div>
 <button id="on2" >on</button>
 <button id="auto2" >auto</button>
 <button id="off2" >off</button>
  <div id="2"></div>

<div class="excontainer">
<div id="resultat2"></div>
</div>
<br />

<div> out3 </div>
 <button id="on3" >on</button>
 <button id="auto3" >auto</button>
 <button id="off3" >off</button>
  <div id="3"></div>

<div class="excontainer">
<div id="resultat3"></div>
</div>
<br />

<div> out4 </div>
 <button id="on4" >on</button>
 <button id="auto4" >auto</button>
 <button id="off4" >off</button>
  <div id="4"></div>
<div class="excontainer">
<div id="resultat4"></div>
</div> 
<br /> 


<script>
$(document).ready(function() {
 $.ajaxSetup ({
        cache: false
    });
 $("#data").load("Last.php");
    var refreshId = setInterval(function() {
        $("#data").load("Last.php");
    }, 500);
    
 
 $("1").load("etat/etat-1");
    var refreshId = setInterval(function() {
  $("#1").load("etat/etat-1");
    }, 500);
    
 $("#2").load("etat/etat-2");
    var refreshId = setInterval(function() {
  $("#2").load("etat/etat-2");
    }, 500);

 $("#3").load("etat/etat-3");
    var refreshId = setInterval(function() {
  $("#3").load("etat/etat-3");
    }, 500);
    
 $("#4").load("etat/etat-4");
    var refreshId = setInterval(function() {
  $("#4").load("etat/etat-4");
    }, 500);
        
});
</script> 

</body>
</html>