如何在django中保存多个同名的html输入？

Question

大家好我想使用django将动态输入的html数组保存到数据库中，我的表单上有三个动态输入，这是我的代码：

Views.py

def generatescripts(request):
    # if this is a POST request we need to process the form data
    if request.method == 'POST':
        # create a form instance and populate it with data from the request:
        form = GenerateScriptsForm(request.POST)
        # check whether it's valid:
        if form.is_valid():
            # process the data in form.cleaned_data as required
            # ...
            # redirect to a new URL:

            Step = request.POST.getlist('Step')

            for el in Step:
                form.save()

            return HttpResponseRedirect('/thanks/')

    # if a GET (or any other method) we'll create a blank form
    else:
        form = GenerateScriptsForm()

    return render(request, 'page/generatescripts.html', {'form': form})

forms.py

from django import forms
from .models import Steps

class GenerateScriptsForm(forms.ModelForm):

    class Meta:
        model= Steps
        fields = "__all__" 

models.py

from django.db import models

# Create your models here.
class Steps(models.Model):

    Step = models.CharField(max_length=200,default='0')
    Description = models.CharField(max_length=200,default='0')
    Result = models.CharField(max_length=200,default='0')

具有相同名称的多个输入并且我无法使用我的代码保存，此代码仅从数组中保存一个值 generatescripts.html

<input type="button" value="Preview form" class="add" id="preview" />
<input type="button" value="Add a Step" class="add" id="add" />

    <script>
 $(document).ready(function() {
    $("#add").click(function() {
        var lastField = $("#buildyourform div:last");
        var intId = (lastField && lastField.length && lastField.data("idx") + 1) || 1;
        var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>");
        fieldWrapper.data("idx", intId);
        var step = $("<input type=\"text\" name= \"Step\" placeholder= \"Step\" class=\"fieldname\" />");
        var description = $("<input type=\"text\" name= \"Description\" placeholder= \"description\" class=\"fieldname\" />");
        var expectedresult = $("<input type=\"text\" name= \"Result\" class=\"fieldname\" />");

        var fType = $("<select class=\"fieldtype\"><option value=\"checkbox\">Checked</option><option value=\"textbox\">Text</option><option value=\"textarea\">Paragraph</option></select>");
        var removeButton = $("<input type=\"button\" class=\"remove\" value=\"-\" />");
        removeButton.click(function() {
            $(this).parent().remove();
        });
        fieldWrapper.append(step);
        fieldWrapper.append(description);
        fieldWrapper.append(expectedresult);
        fieldWrapper.append(fType);
        fieldWrapper.append(removeButton);
        $("#buildyourform").append(fieldWrapper);
    });
    $("#preview").click(function() {
        $("#yourform").remove();
        var fieldSet = $("<fieldset id=\"yourform\"><legend>Your Form</legend></fieldset>");
        $("#buildyourform div").each(function() {
            var id = "input" + $(this).attr("id").replace("field","");
            var label = $("<label for=\"" + id + "\">" + $(this).find("input.fieldname").first().val() + "</label>");
            var input;
            switch ($(this).find("select.fieldtype").first().val()) {
                case "checkbox":
                    input = $("<input type=\"checkbox\" id=\"" + id + "\" name=\"" + id + "\" />");
                    break;
                case "textbox":
                    input = $("<input type=\"text\" id=\"" + id + "\" name=\"" + id + "\" />");
                    break;
                case "textarea":
                    input = $("<textarea id=\"" + id + "\" name=\"" + id + "\" ></textarea>");
                    break;    
            }
            fieldSet.append(label);
            fieldSet.append(input);
        });
        $("body").append(fieldSet);
    });
});
    </script>
        <input type="submit"  />

</form>

{% endblock %}