Insert dynamically added TextBoxes value in JavaScript Array using jQuery

I am generating two textbox on button click, i want to fetch those data in array and pass it to controller as model object.

my problem is getting same value during iteration of dynamic textboxes.

$(document).ready(function () {
    function GetDynamicPrimarySpecialBox(value) {
        return '<input name = "Primarytxtvalue" type="text"  class="form-control" value = "' + value + '" />' +

            '<input name = "Primarytxtvalue" type="text"  class="form-control" value = "' + value + '" />' +

            '<input type="button" value="Remove" class="remove" />'
    }
    $("body").on("click", ".remove", function () {
        $(this).closest("div").remove();
    });

    function GetDynamicSubSpecialBox(value) {
        return '<div class="form-group"><input name = "SubSpecial" type="text"  class="form-control" value = "' + value + '" /></div>&nbsp;' +

            '<div class="form-group"><input name = "SubSpecial" type="text"  class="form-control" value = "' + value + '" /></div>&nbsp;' +

            '<input type="button" value="Remove" class="remove" />'

    }
    $("body").on("click", ".remove", function () {
        $(this).closest("div").remove();

    });
    $("#addmore").click(function (e) {
        e.preventDefault();

        var div = $("<div/>");
        div.html(GetDynamicPrimarySpecialBox(""));
        $("#TextBoxContainerPrimary").append(div);

    });

    // Remove element
    $('.container').on('click', '.remove', function () {

        var id = this.id;
        var split_id = id.split("_");
        var deleteindex = split_id[1];

        // Remove <div> with id
        $("#div_" + deleteindex).remove();
    });
    $("#addmorespecial").click(function (e) {
        e.preventDefault();

        var div = $("<div />");
        div.html(GetDynamicSubSpecialBox(""));
        $("#TextBoxContainersubspecial").append(div);
    });

    $("#btnSpecialityAdd").click(function () {

        var PrimarySpecialityMapping = new Array();
        var primaryfirstbox = $('#txtprimary').val();

        var primaryfirstboxtax = $('#txtprimarycode').val();
        // PrimarySpecialityMapping.push(primaryfirstboxtax);


        PrimarySpecialityMapping.push({
            TaxonamyCode: "'" + primaryfirstboxtax + "'",
            SpecialityName: "'" + primaryfirstbox + "'"
        });

        $("input[name=Primarytxtvalue]").each(function () {
            if (this.value != '') {
                //PrimarySpecialityMapping.push("'" + this.value + "'");

                PrimarySpecialityMapping.push({
                    SpecialityName: "'" + this.value + "'",
                    TaxonamyCode: "'" + this.value + "'"

                });
            }
        });

        var SubSpecialityMapping = new Array();
        var subfirstbox = $('#specialities').val();
        //SubSpecialityMapping.push(subfirstbox);

        var primarysubboxtax = $('#code2').val();
        //SubSpecialityMapping.push(primarysubboxtax);

        SubSpecialityMapping.push({
            SpecialityName: "'" + subfirstbox + "'",
            TaxonamyCode: "'" + primarysubboxtax + "'"

        });

        $("input[name=SubSpecial]").each(function () {
            if (this.value != '') {
                //SubSpecialityMapping.push("'" + this.value + "'");
                SubSpecialityMapping.push({
                    SpecialityName: "'" + this.value + "'",
                    TaxonamyCode: "'" + this.value + "'"

                });
            }

        });


        var clr = new Object();
        clr.PrimarySpecialityMapping = PrimarySpecialityMapping;
        clr.SubSpecialityMapping = SubSpecialityMapping;

        alert('hi')
        $.ajax({
            url: '@Url.Action("AddProviderSpecialities","Provider")',
            type: "POST",

            data: clr,
            success: function (data) {
                alert("Success");
            },
            failure: function (data) {
                alert("Failed");
            },
        });
    });
});

I am trying to get values by iterating the textbox name but getting same value. i have two textbox with different values

<form class="tab-pane" id="step3">
    <div class="provider-details-wrapper">
        <h6>Primary/Sub Specialities Details</h6>
        <div class="row">

            <div class="col-lg-3 col-md-4">
                <div class="form-group">
                    <label for="primary">Primary Specialities 1</label>
                    <input type="text" class="form-control" id="txtprimary">
                </div>
            </div>
            <div class="col-lg-3 col-md-4">
                <div class="form-group">
                    <label for="code">Taxonamy Code</label>
                    <input type="text" class="form-control" id="txtprimarycode">
                </div>
            </div>
            <div class="col-lg-5 col-md-6 align-self-center">
                <button class="btn upload-btn px-5 mt-3" id="addmore">Add More</button>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-3 col-md-4" id="TextBoxContainerPrimary">
            </div>
        </div>
        <div class="row">
            <div class="col-lg-3 col-md-4">
                <div class="form-group">
                    <label for="specialities">Sub Specialities 1</label>
                    <input type="text" class="form-control" id="txtspecialities">
                </div>
            </div>
            <div class="col-lg-3 col-md-4">
                <div class="form-group">
                    <label for="code2">Taxonamy Code</label>
                    <input type="text" class="form-control" id="txtspecialcode">
                </div>
            </div>
            <div class="col-lg-5 col-md-6 align-self-center">
                @*
                <button class="btn btn-trash mt-3 me-3 mb-2">
                    <span class="material-symbols-outlined align-middle">delete
                    </span>
                </button>
                *@
                                    <button class="btn upload-btn px-5 mt-3" id="addmorespecial">Add More</button>
            </div>

        </div>
        <div class="row">
            <div class="col-lg-3 col-md-4" id="TextBoxContainersubspecial">
            </div>

        </div>
        <div class="d-flex justify-content-end mt-5">
            <a href="@Url.Action("List","Provider")" class="btn cancel-btn me-3">Back</a>
            <input id="btnSpecialityAdd" type="submit" value="Submit" class="btn save-btn px-4" />
        </div>
    </div>
</form>