JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="display-hor">
    <div class="form__group">
      <div id="buildyourform">
        <div class="fieldwrapper" data-questionid="5e578b7d30bb2fd60c1f9855" id="field1">
          <select name="notes" value="" id="static-select-prefills" class="fieldtype select-text">

          </select>
          <input type="text" name="value" value="" class="fieldname form__field" required="">
          <button id="btn-addfield">add</button>
        </div>
      </div>
    </div>
 
  </div>
  <button type="submit" onclick="generateJson()">submit</button>

CSS

legend {
      padding: 0px 10px;
      background: black;
      color: #FFF;
    }

    .fieldwrapper {
      display: flex;
    }

    input.add {
      float: right;
    }

    input.fieldname {
      float: left;
      clear: left;
      display: block;
      margin: 5px;
    }

    select.fieldtype {
      float: left;
      display: block;
      margin: 5px;
    }

    input.remove {
      float: left;
      display: block;
      margin: 5px;
    }

    #yourform label {
      float: left;
      clear: left;
      display: block;
      margin: 5px;
    }

    #yourform input,
    #yourform textarea {
      float: left;
      display: block;
      margin: 5px;
    }
    input.fieldname.form__field {
    margin: 20px 20px 20px 0;
}
select.fieldtype.select-text {
    margin: 20px 20px 20px 0;
}
#btn-addfield
{
    margin: 5px 20px 20px 0;
}
.remove-field {
    position: relative;
    top: 20px;
    cursor: pointer;
    color: #EF5451;
    height:20px;
    width:20px
}
#btn-addfield{
    position: relative;
    top: 11px;
    cursor: pointer;
    color: #EF5451; 
}

JavaScript

var staticPrefills = [{
          "questionId": "5e578b7d30bb2fd60c1f9855",
          "note": "Mobile Number",
          "prefillValue": null
        },
        {
          "questionId": "5e578b8930bb2fd60c1f985c",
          "note": "Email",
          "prefillValue": null
        },
        {
          "questionId": "5e578b9330bb2fd60c1f985f",
          "note": "Name",
          "prefillValue": null
        },
        {
          "questionId": "5e578ba930bb2fd60c1f9862",
          "note": "Agent ID",
          "prefillValue": null
        },
      ]
      var staffPrefillArray = []
   function generateJson(){
  var divchildlength =  $("#buildyourform").children().length;
  staffPrefillArray = [];
        for(var i = 0;  i < divchildlength; i++ ){
         var selectValue=   $(`#buildyourform div:nth-child(${i + 1}) select`).val();
         var textValue=   $(`#buildyourform div:nth-child(${i + 1}) input`).val();
         var selectAttrValue = $(`#buildyourform div:nth-child(${i + 1}) select option:selected`).attr('questionId');
        //  console.log(selectValue);
        //  console.log(textValue);
        //  console.log(selectAttrValue);
         var generateJsonvalue = {
          "questionId": selectAttrValue,
        "note": selectValue,
        "prefillValue": textValue
         }
         staffPrefillArray.push(generateJsonvalue);

        }
        console.log(staffPrefillArray);
      }
  
      for(var i=0; i<staticPrefills.length; i++){
              $('#static-select-prefills').append(`<option questionId="${staticPrefills[i].questionId}" value="${staticPrefills[i].note}"> 
              ${staticPrefills[i].note} 
             
         </option>`);
             }
          
      var clicks = 1;
      var s = 1;
      $("#btn-addfield").click(function () {
        if (staticPrefills.length > clicks) {
          var lastField = $("#buildyourform div:last");
          var intId = (lastField && lastField.length && lastField.data("idx") + 1) || 1;
     ...