How to create a JSON file from a JS?

$(document).ready(function () {
  var num = 0

  $('#FieldCount').on('change', function () {
    $('#Home').empty()
    num = $(this).val()
    $("#Home").append('
            <br>
            <br>
            <div class="row changer" style="">
                <div class ='col-xs-3'>   
                    <label>Tipo</label>
                 </div>
                <div class ='col-xs-3'>   
                     <label>Nome</label>
                 </div>
                 <div class ='col-xs-6'>
                    <label>Campo</label>
                 </div>
            </div>
        ')

    for (var x = 0; x < num; x++) {
      $('
            <div class="row" >
                <label id="Count" >${x + 1}</label>
                <div class="col-xs-3">
                    <select name="${x}" class='fieldtype' style='border: none; outline: none; height: 20px;width: 100%;'>
                        <option>Input</option>
                        <option>Combo Box</option>
                    </select>
                </div>
                <div class="col-xs-3">
                    <input class="${x} in" type="text" value="Campo" style="border-radius: 3px; background-color: grey; border: none; outline: none;"/>
                </div>
                <div class="col-xs-2" class="OpCom${x}">
                    <select style="display: none;border: none; height: 25px; border-radius: 3px;" name=${x} class="OpCom">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                        <option>6</option>
                        <option>7</option>
                        <option>8</option>
                        <option>9</option>
                        <option>10</option>
                    </select>
                    <div class='morein' name=${x}>

                    </div>
                </div>
            </div>
            ').appendTo('#Home')
    }

    $('.fieldtype').on('change', function () {
      temp_index = $(this).attr('name')

      if ($(this).val() == 'Input') {
        console.log('input')
        $('.${temp_index}').addClass('in')
        $('.OpCom[name=${temp_index}]').removeClass('Ready')
        $('.OpCom[name=${temp_index}]').css('background-color', 'rgba(0,0,0,0)')
        $('.OpCom[name=${temp_index}]').css('color', 'rgba(0,0,0,0)')
        $('.OpCom${temp_index}').hide()
        $('.morein[name=${temp_index}]').hide()

      } else {
        $('.OpCom[name=${temp_index}]').css('background-color', 'buttonface')
        $('.OpCom[name=${temp_index}]').css('color', 'black')
        $('.OpCom${temp_index}').append('
                    <select style="border: none; height: 25px; border-radius: 3px;" name=${temp_index} class="OpCom">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                        <option>6</option>
                        <option>7</option>
                        <option>8</option>
                        <option>9</option>
                        <option>10</option>
                    </select>
                    ')

        console.log('combo')
        $('.${temp_index}').removeClass('in')
        $('.${temp_index}').addClass('on')
        console.log($('.${temp_index}').val())
        $('.OpCom[name=${temp_index}]').addClass('Ready')
        $('.morein[name=${temp_index}]').show()

        $('.OpCom${temp_index}').append('
                <select style="border: none; height: 25px; border-radius: 3px;" name=${temp_index} class="OpCom">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                </select>
                ')
      }

      var a = $(this).attr('name')
      $('.OpCom[name=${a}]').show()


      $('.OpCom[name=${a}]').change(function () {
        $('.morein[name=${a}]').empty()
        for (var z = 0; z < $('.OpCom[name=${a}]').val(); z++) {
          $('.morein[name=${a}]').append('<input name='${a}i' type=text value="item" style="border: none; border-bottom: 1px solid black; broder-radius: 3px; background-color: grey;" />')
        }
      })
    })
  })

  $('#Create').on('click', (event) => {
    event.preventDefault();
    const home = $('#Home')[0];
    let aux = { comboboxs: [], inputs: [] };

    aux.comboboxs = getSelects(home);
    aux.inputs = getInputs(home);
    console.log(aux);
  });
});

const getInputs = (home) =>  {
  const inputs = home.getElementsByClassName('in');
  const lengthInputs = inputs.length;
  const auxInputs = [];

  for(let i = 0; i < lengthInputs; i++) {
    auxInputs.push(inputs[i].value);
  }

  return auxInputs;
}

const getSelects = (home) => {
  // get OpCom selects
  const selects = home.getElementsByClassName('OpCom');
  const lengthSelects = selects.length;
  const auxSelects = [];
  let parent;
  let inputsSelect;
  let grandparent;
  let items;

  for (let i = 0; i < lengthSelects; i++) {
    // if select display is none continue
    if ($(selects[i]).css('display') === 'none') continue;

    items = [];
    // get div parent of Opcom
    parent = $(selects[i]).parent()[0];
    inputsSelect = parent.getElementsByClassName('morein')[0];
    //get inputs of moreIn
    inputsSelect = inputsSelect.getElementsByTagName('input');
    for (let j = 0; j < inputsSelect.length; j++) {
      items.push($(inputsSelect[j]).val());
    }

    // get grandparent div
    grandparent = $(parent).parent()[0];
    // add combobox
    auxSelects.push({
      // get value from input on
      name: grandparent.getElementsByClassName('on')[0].value,
      items: items
    });
  }

  return auxSelects;
}

<!DOCTYPE html>
<html>
<head>


<meta name="viewport" content="width=device-width, initial-scale=1">
<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><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</head>
<body style="background-color: #cccccc;">
    <div style="text-align: center;"class="container-fluid">
        <h2 style="text-align: center;">Gerador de App</h2>
        <h4 style="text-align: center;">Quantos campos deseja criar?</h4>
        <select id="FieldCount" style="width: 100px; border: none; width: 150px;height: 30px; border-radius: 3px; outline: none;">
            <option name="one">1</option>
            <option name="one">2</option>
            <option name="one">3</option>
            <option name="one">4</option>
            <option name="one">5</option>
            <option name="one">6</option>
            <option name="one">7</option>
            <option name="one">8</option>
            <option name="one">9</option>
            <option name="one">10</option>
        </select>
        <div id="Home">

        </div>
        
        <a href=""><button id="Create" style=" margin-top: 100px;bottom: 0; border: none; font-size: 25px; border-radius: 3px;">Criar</button></a>
    </div>
</body>
</html>