Return modal values to main screen using jQuery

Question

I have a Bootstrap modal where I fill out a "form" with 2 input fields and 3 radio options. Follow code below! By filling out these fields I have one button (Generate) that puts the entered values in the modal table. What I can not do is to finish taking the values of this modal table plus the radio, and return to the table of the main screen using the button (Use)...

NOTE: sorry for the cluttered CSS was that Ctrl+c/Ctrl+v!

function GerarTabela() {
  var valor = $("#txtParcela").val();
  var data = $("#datepicker1").val();
  var tabela = $(".myBody");
  tabela.append(`<tr><td>${data}</td><td>${valor}</td></tr>`);
}

function LimparTabela() {
  $(".myBody tr").remove();
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#gridSystemModal">Gerar Fluxo</button>

<table class="table table-bordered">
  <thead>
    <tr>
      <th colspan="2" style="text-align: center;">Fluxo</th>
    </tr>
    <tr>
      <th>Data</th>
      <th>Valor</th>
    </tr>
  </thead>
  <tbody class="firstBody">
  </tbody>
</table>

<label> Valor do Radio Marcado </label>


<div id="gridSystemModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <div class="modal-title" id="gridModalLabel" style="font-weight: bold; padding-left: 340px">Gerar Fluxo</div>
      </div>
      <div class="modal-body">
        <div class="container" style="padding-bottom: 30px;">
          <div class="row" style="padding-top: 15px;">
            <div class="col-2" style="padding-right: 8px;">Valor Parcela</div>
            <div class="col-4" style="padding-left: 0px;">
              R$
              <input type="text" id="txtParcela" />
            </div>
            <div class="col-6"></div>
          </div>
          <div class="row" style="padding-top: 15px;">
            <div class="col-2">Primeiro dia</div>
            <div class="col-4" style="padding-left: 22px;">
              <input type="text" id="datepicker1" />
            </div>
            <div class="row">
              <div class="col">
                <label>Caso o dia do fluxo não seja dia útil:</label>
                <div class="custom-control custom-radio">
                  <input type="radio" class="custom-control-input" id="defaultGroupExample1" name="radioDiaUtil" />
                  <label class="custom-control-label" for="defaultGroupExample1">Manter o fluxo neste dia.</label>
                </div>
                <div class="custom-control custom-radio">
                  <input type="radio" class="custom-control-input" id="defaultGroupExample2" name="radioDiaUtil" />
                  <label class="custom-control-label" for="defaultGroupExample2">Levar o fluxo para o dia útil seguinte.</label>
                </div>
                <div class="custom-control custom-radio">
                  <input type="radio" class="custom-control-input" id="defaultGroupExample3" name="radioDiaUtil" />
                  <label class="custom-control-label" for="defaultGroupExample3">Trazer o fluxo para o dia útil anterior.</label>
                </div>
              </div>
            </div>
            <div class="row" style="padding-top: 15px;">
              <div class="col-7">
                <table class="table table-bordered">
                  <thead>
                    <tr>
                      <th colspan="2" style="text-align: center;">Fluxo</th>
                    </tr>
                    <tr>
                      <th>Data</th>
                      <th>Valor</th>
                    </tr>
                  </thead>
                  <tbody class="myBody">
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <div class="row">
            <div class="col">
              <button type="button" id="btnGerar" class="btn btn-info" onclick="GerarTabela()">Gerar</button>
            </div>
            <div class="col" style="padding-right: 425px;">
              <button type="button" class="btn btn-danger" onclick="LimparTabela()">Limpar</button>
            </div>
            <div class="col">
              <button type="button" id="btnUsar" class="btn btn-success">Usar</button>
            </div>
            <div class="col">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

Answer 1

First thing is to put one id in the label that will receive the radio text marked, not to confuse with the other existing label in HTML:

<label id="valor_radio"> Valor do Radio Marcado </label>

Then it’s creating a Event Handler to the button Use. When clicked, it will send the values (modal table rows + radio text checked) to the main table as well as close the modal:

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

   var linhas_modal = $(".modal-body .myBody").html(); // pega o HTML da tabela da modal
   var radio = $(".modal-body :radio:checked").next().text(); // pega o texto do radio checado
   $(".firstBody").append(linhas_modal); // insere as linhas na tabela principal
   $("#valor_radio").text(radio); // insere o texto do radio na label
   $('#gridSystemModal').modal('hide') // fecha a modal

});

Example:

$("#btnUsar").on("click", function(){
   
   var linhas_modal = $(".modal-body .myBody").html();
   var radio = $(".modal-body :radio:checked").next().text();
   $(".firstBody").append(linhas_modal);
   $("#valor_radio").text(radio);
   $('#gridSystemModal').modal('hide')
   
});

function GerarTabela() {
  var valor = $("#txtParcela").val();
  var data = $("#datepicker1").val();
  var tabela = $(".myBody");
  tabela.append(`<tr><td>${data}</td><td>${valor}</td></tr>`);
}

function LimparTabela() {
  $(".myBody tr").remove();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#gridSystemModal">Gerar Fluxo</button>

<table class="table table-bordered">
  <thead>
    <tr>
      <th colspan="2" style="text-align: center;">Fluxo</th>
    </tr>
    <tr>
      <th>Data</th>
      <th>Valor</th>
    </tr>
  </thead>
  <tbody class="firstBody">
  </tbody>
</table>

<label id="valor_radio"> Valor do Radio Marcado </label>


<div id="gridSystemModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <div class="modal-title" id="gridModalLabel" style="font-weight: bold; padding-left: 340px">Gerar Fluxo</div>
      </div>
      <div class="modal-body">
        <div class="container" style="padding-bottom: 30px;">
          <div class="row" style="padding-top: 15px;">
            <div class="col-2" style="padding-right: 8px;">Valor Parcela</div>
            <div class="col-4" style="padding-left: 0px;">
              R$
              <input type="text" id="txtParcela" />
            </div>
            <div class="col-6"></div>
          </div>
          <div class="row" style="padding-top: 15px;">
            <div class="col-2">Primeiro dia</div>
            <div class="col-4" style="padding-left: 22px;">
              <input type="text" id="datepicker1" />
            </div>
            <div class="row">
              <div class="col">
                <label>Caso o dia do fluxo não seja dia útil:</label>
                <div class="custom-control custom-radio">
                  <input type="radio" class="custom-control-input" id="defaultGroupExample1" name="radioDiaUtil" />
                  <label class="custom-control-label" for="defaultGroupExample1">Manter o fluxo neste dia.</label>
                </div>
                <div class="custom-control custom-radio">
                  <input type="radio" class="custom-control-input" id="defaultGroupExample2" name="radioDiaUtil" />
                  <label class="custom-control-label" for="defaultGroupExample2">Levar o fluxo para o dia útil seguinte.</label>
                </div>
                <div class="custom-control custom-radio">
                  <input type="radio" class="custom-control-input" id="defaultGroupExample3" name="radioDiaUtil" />
                  <label class="custom-control-label" for="defaultGroupExample3">Trazer o fluxo para o dia útil anterior.</label>
                </div>
              </div>
            </div>
            <div class="row" style="padding-top: 15px;">
              <div class="col-7">
                <table class="table table-bordered">
                  <thead>
                    <tr>
                      <th colspan="2" style="text-align: center;">Fluxo</th>
                    </tr>
                    <tr>
                      <th>Data</th>
                      <th>Valor</th>
                    </tr>
                  </thead>
                  <tbody class="myBody">
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <div class="row">
            <div class="col">
              <button type="button" id="btnGerar" class="btn btn-info" onclick="GerarTabela()">Gerar</button>
            </div>
            <div class="col" style="padding-right: 425px;">
              <button type="button" class="btn btn-danger" onclick="LimparTabela()">Limpar</button>
            </div>
            <div class="col">
              <button type="button" id="btnUsar" class="btn btn-success">Usar</button>
            </div>
            <div class="col">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>