Multiple Forms or Multiple Submits in a Page

Two submit buttons in one form

If you give each one a name, the clicked one will be sent through as any other input.

<input type="submit" name="button_1" value="Click me">

Form with multiple submit buttons or multiple forms

You don't need a separate form for each article, you don't need a hidden input, and you don't need JavaScript. Just use a button instead of an input like the other answer suggested. Any of those buttons will submit the form if they're clicked, and $_POST['id'] will have the value of the button that was clicked.

<button> is different than <input> because it's not a self-closing tag. With an <input>, the value is the button text. But with a <button>, you can give it a value, and then put the text you want it to have between the tags.

Here's an example based on your code.

<form method="POST" action="{{url('/deleteArticle')}}">
   {{ csrf_field() }}
   @foreach($articles as $a)
      <div class="test">
         <div class="name"><?= $a['name_a'] ?></div>
         <button type="submit" class="del cross" name="id" value='<?= $a['id_a'] ?>' >X</button>
      </div>
   @endforeach
</form>

Unrelated to the question, I also fixed the repeated csrf_field and merged the two classes on the button.

Using multiple forms or multiple submit buttons, what's the difference?

Ah? Multiple submit buttons on a single form will all submit the entire form when pressed... there's really no advantage to having multiples, unless you're overriding how the submit process works so each button only submits it's own area. In this case they'd probably not even by submit buttons, but just buttons with sum JS code to handle submission.

Multiple forms are discrete spaces of data collection, each can have it's own submit button... but only one of them can be sent at a time (and depending on the browser you may loose what's in the other forms).

Neither approach is particularly good from a user interface perspective since it'll be confusing.

The real question is, what are you trying to do that prompts you to ask this?

Submit Multiple Forms on One Page at the Same Time with PHP

You can use ajax.

form.php

<?php if(isset($_POST['step1'])&&isset($_POST['step2'])&&isset($_POST['step3'])){
  echo "You chose " . $_POST['step1']." and ".$_POST['step2']." and ".$_POST['step3'].". Well done.";die;
}?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"0"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Data form</title>
</head>
<script>
$(document).ready(function(){
    $("a.btn").click(function(){
        var datastring = $("#form1").serialize();
        datastring +="&" + $("#form2").serialize();
        datastring +="&" + $("#form3").serialize();
        $.ajax({
            type: "POST",
            url: "form.php",
            data: datastring,
            success: function(data) {
                console.log(data);
                alert(data);
            },
            error: function() {
                alert('error handing here');
            }
        });
    });
});

</script>
<body>
<form id="form1">
 <input name="step1" value="1" type="text"/>
</form>
<form id="form2">
 <input name="step2" value="2" type="text"/>
</form>
<form id="form3">
 <input name="step3" value="3" type="text"/>
</form>
 <a class="btn btn-success">Submit All</a>
</body>
</html>

Multiple submit buttons in an HTML form

I'm just doing the trick of floating the buttons to the right.

This way the Prev button is left of the Next button, but the Next comes first in the HTML structure:

.f {
  float: right;
}
.clr {
  clear: both;
}

<form action="action" method="get">
  <input type="text" name="abc">
  <div id="buttons">
    <input type="submit" class="f" name="next" value="Next">
    <input type="submit" class="f" name="prev" value="Prev">
    <div class="clr"></div><!-- This div prevents later elements from floating with the buttons. Keeps them 'inside' div#buttons -->
  </div>
</form>

Is there a way to submit multiple forms with a single button and unique hidden values?

The simplest approach would be to make the whole table one form.

<form action="/dues/?family-dues={{ familyprofile }}" method="POST" id= "dues-payment">
    {% csrf_token %}
    <table>
        {% for due in dues %}
          <tr>
            <td>{{ due.0 }}</td>
            <td>{{ due.1 }}</td>
            <td>{{ due.3 }}</td>
            <td>{{ due.4 }}</td>
            <td>{{ due.5 }}</td>
            <td>
              <input type="text" placeholder="Enter Amount" name="due-{{ due.2 }}-amount">
            </td>
          </tr>
        {% endfor %}
    </table>
    <input type="hidden" value="{{ ?? }}" name="member-id">
    <input type="hidden" value="{{ duefamily.0 }}" name="family-id">
    <button id="submit-payment">Pay</button>
</form>

Note that I added the due IDs to the names of the fields that are shown on each line. Now you will have to do a bit of string parsing on the Django side to match these together.

You might also want to look into Django Formsets, which allow you to define the whole form in Python and just call form.as_table() in the template. It also has support for nested forms like this one.

Edit

I think you should also be able to do the amount inputs like this and then get lists in Django, but unfortunately I can't test if it works. You would get one called due-id and one called due-amount, and then rely on the values for each index matching.

        <td>
          <input type="text" placeholder="Enter Amount" name="due-amount[]">
          <input type="hidden" value={{ due.2 }} name="due-id[]">
        </td>

How to create multiple forms in one page with multiple submit buttons in APEX?

The simplest option is to submit only once, at the end of the survey.

Another option (if you want to allow partial submits) is to create one page per group of questions in the survey and submit page-by-page.

Or - if it has to be one page - then you'll have to create your own submitting logic and write your own processes which will perform database insert action, inserting only items which are relevant to each of those submit buttons.