如何根据按下的按钮来调用函数来显示div？

Question

I'm trying to generate a set of N buttons, one for each row of a DB table, I need to show a <div> by putting his style="display:none" to style="display:block" when one of the buttons is clicked, this <div> will show a form.

Until now i got this:

home.PHP

    <div id="add" style="display:none;">
        <form action="#" method="post" id="form">
            <div src="close" id="close" onClick="div_hide()">X</div>
            Aggiungi
            <input type="text" name="soldi" id="campo" placeholder="Soldi">
            <a id="submit" href="">
                <button>Aggiungi</button>
            </a>
        </form>
    </div>
<?php
    while($sezioni = mysqli_fetch_assoc($sezione_sql)){     
        echo "<div class =\"sezione\">
                  <a id=\"popup\" onclick=\"div_show()\">
                      <div class=\"pulsante\">add</div>
                  </a>
              </div>";
    }
?>

java.JS

function div_show() {
    document.getElementById('add').style.display = "block";
}

function div_hide(){
    document.getElementById('add').style.display = "none";
}

How could I call a function on submit that will update a determinated DB row getting in input an ID of the pressed button?

Answer 1

1. Pass db_id through javascript function.
2. In javascript function assign the passed db_id to the hidden input field in the form.

Passing db_id:

while($sezioni = mysqli_fetch_assoc($sezione_sql)){  
    $db_id = $sezioni['id']; // id from database   
        echo "<div class =\"sezione\">
                  <a id=\"popup\" onclick=\"div_show($db_id )\">
                      <div class=\"pulsante\">add</div>
                  </a>
              </div>";
    }

In Form add a hidden input field

<input type="hidden" name="db_id" id="db_id" value="">

In Javascript function

function div_show(db_id) {
    document.getElementById('add').style.display = "block";
    document.getElementById('db_id').value = db_id;
}