Помогите оптимизировать и доделать скрипт

[robotehnika18]

Здравствуйте. Имеется такой рабочий код:

<div style="float:left;padding:1px;margin:10px;width:160px;height:257px;background-color:gray;">

<div id="b1" style="float:left;margin:1px;width:30px;height:30px;background-color:silver;">
<input type="button" style="width:30px;height:30px;background-color:rgba(255, 255, 255, 0);" onclick="reverse1()">
</div>
<div id="b2" style="float:left;margin:1px;width:30px;height:30px;background-color:silver;">
<input type="button" style="width:30px;height:30px;background-color:rgba(255, 255, 255, 0);" onclick="reverse2()">
</div>
<div id="b3" style="float:left;margin:1px;width:30px;height:30px;background-color:silver;">
<input type="button" style="width:30px;height:30px;background-color:rgba(255, 255, 255, 0);" onclick="reverse3()">
</div>
<div id="b4" style="float:left;margin:1px;width:30px;height:30px;background-color:silver;">
<input type="button" style="width:30px;height:30px;background-color:rgba(255, 255, 255, 0);" onclick="reverse4()">
</div>
<div id="b5" style="float:left;margin:1px;width:30px;height:30px;background-color:silver;">
<input type="button" style="width:30px;height:30px;background-color:rgba(255, 255, 255, 0);" onclick="reverse5()">
</div>
</div>

<div style="float:left;padding:1px;margin-left:20px;width:300px;height:256px;">
<br>
<span id="t1">0</span><span id="t2">0</span><span id="t3">0</span><span id="t4">0</span><span id="t5">0</span><br>
</div>

<script type="text/javascript">

function reverse1() {

var e = document.getElementById("t1");
var b = document.getElementById("b1");

var txt = e.textContent || e.innerText;
var box = document.getElementById('b1').style.backgroundColor;

var txt2 = '0';
  if(txt != txt2){var newtxt = '0';}
  else{var newtxt = '1';}
document.getElementById('t1').innerHTML = newtxt;

var box2 = 'forestgreen';
  if(box != box2){var newbox = 'forestgreen';}
  else{var newbox = 'silver';}
document.getElementById('b1').style.backgroundColor = newbox;

};

function reverse2() {

var e = document.getElementById("t2");
var b = document.getElementById("b2");

var txt = e.textContent || e.innerText;
var box = document.getElementById('b2').style.backgroundColor;

var txt2 = '0';
  if(txt != txt2){var newtxt = '0';}
  else{var newtxt = '1';}
document.getElementById('t2').innerHTML = newtxt;

var box2 = 'forestgreen';
  if(box != box2){var newbox = 'forestgreen';}
  else{var newbox = 'silver';}
document.getElementById('b2').style.backgroundColor = newbox;

};

function reverse3() {

var e = document.getElementById("t3");
var b = document.getElementById("b3");

var txt = e.textContent || e.innerText;
var box = document.getElementById('b3').style.backgroundColor;

var txt2 = '0';
  if(txt != txt2){var newtxt = '0';}
  else{var newtxt = '1';}
document.getElementById('t3').innerHTML = newtxt;

var box2 = 'forestgreen';
  if(box != box2){var newbox = 'forestgreen';}
  else{var newbox = 'silver';}
document.getElementById('b3').style.backgroundColor = newbox;

};

function reverse4() {

var e = document.getElementById("t4");
var b = document.getElementById("b4");

var txt = e.textContent || e.innerText;
var box = document.getElementById('b4').style.backgroundColor;

var txt2 = '0';
  if(txt != txt2){var newtxt = '0';}
  else{var newtxt = '1';}
document.getElementById('t4').innerHTML = newtxt;

var box2 = 'forestgreen';
  if(box != box2){var newbox = 'forestgreen';}
  else{var newbox = 'silver';}
document.getElementById('b4').style.backgroundColor = newbox;

};

function reverse5() {

var e = document.getElementById("t5");
var b = document.getElementById("b5");

var txt = e.textContent || e.innerText;
var box = document.getElementById('b5').style.backgroundColor;

var txt2 = '0';
  if(txt != txt2){var newtxt = '0';}
  else{var newtxt = '1';}
document.getElementById('t5').innerHTML = newtxt;

var box2 = 'forestgreen';
  if(box != box2){var newbox = 'forestgreen';}
  else{var newbox = 'silver';}
document.getElementById('b5').style.backgroundColor = newbox;

};
</script>

Вопрос - как можно через цикл for упростить работу скрипта (если кнопок будет больше и на каждую писать свою функцию - будет большая программа)

И второй вопрос, как сделать кнопку сброса всех значений и нажатых кнопок в исходное состояние?

Спасибо. JS знаю плохо, изучаю для своих сайтов по форумам

[рони]

robotehnika18,
https://learn.javascript.ru/event-delegation

<!DOCTYPE HTML>
<html>

<head>
    <title>Untitled</title>
    <style type="text/css">
        .block {
            display: flex;
        }

        .table {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            grid-auto-rows: 30px;
            padding: 1px;
            margin: 10px;
            width: 160px;
            height: 257px;
            background-color: gray;
        }

        .table>input {
            width: 30px;
            height: 30px;
            background-color: silver;
        }

        .table>input.active {
            background-color: forestgreen;
        }

        .show {
            grid-template-columns: repeat(5, 1fr);
            padding: 1px;
            margin: 10px;
            width: 40px;
            height: 257px;
        }

        [type="reset"] {
            height: 40px;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div class="block">
        <div class="table">
            <input type="button">
            <input type="button">
            <input type="button">
            <input type="button">
            <input type="button">
            <input type="button">
            <input type="button">
            <input type="button">
            <input type="button">
            <input type="button">
        </div>
        <div class="show">
            <span>0</span><span>0</span><span>0</span><span>0</span><span>0</span>
            <span>0</span><span>0</span><span>0</span><span>0</span><span>0</span>
        </div>
        <button type="reset">reset</button>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            let inputs = Array.from(document.querySelectorAll('.table>input'));
            let spans = Array.from(document.querySelectorAll('.show>span'));
            document.querySelector('.block').addEventListener('click', function(event) {
                let target = event.target.closest('.table>input');
                if (target) {
                    let index = inputs.indexOf(target);
                    let txt = +inputs[index].classList.toggle('active');
                    let span = spans[index];
                    if (span) span.textContent = txt;
                }
                let reset = event.target.closest('.block>[type="reset"]');
                if (reset) {
                    inputs.forEach((input, i) => {
                        input.classList.remove('active');
                        let span = spans[i];
                        if (span) span.textContent = 0;

                    })

                }
            })
        })
    </script>
</body>

</html>

[robotehnika18]

Благодарю!