JSFiddle - React, Tailwind, and code Playground

by Jenson M John

HTML

<form name="frmfeed" id="frmfeed" enctype="multipart/form-data" method="post" onSubmit="return validateFeedbackForm();">
       <input type="text" name="country[]" id="con" class="form-control oditek-form" placeholder="Add Country"><br/><br/>
    </form>

    <input type="button" class="btn btn-success" name="plus" id="plus" value="+"> <input type="button" class="btn btn-danger" name="minus" id="minus" value="-">
    <button type="submit" class="btnsub" name="userbtnsubmit" id="btnsubmit">Add</button>

JavaScript

$( "#plus" ).on("click", function() {

            $( "#frmfeed" ).append( '<input type="text" name="country[]" class="form-control oditek-form" placeholder="Add Country"/>');

        });

        $("#minus").on("click", function(){

           if($("input[name='country[]']").length > 1)
           {
              $("input[name='country[]']:eq("+(length-1)+")").remove();
           }

        });

        $("#btnsubmit").on("click", function(){

            var countries = []; 
            $("input[name='country[]']").each(function(){

                countries.push($(this).prop("value"));

            });

            console.log(countries);

            //AJAX Post Data To Your Server

            var postDataObj = {
                            url: "YOUR_SERVER_FILE",
                            type: "post",
                            data: countries,
                            success: function(data){
                               //Response Data From Server
                            }
            }
            console.log(postDataObj);       

            $.ajax(postDataObj);



        });