Send formatted elements to modal

Question

Good night!

I have a list of numbers where the user selects which numbers he wants to book and then informs his name and phone in a modal, and I save this data in the database.

When the user selects more than one number, they are 'together' (see image 1). Is there a way in the js script I format and put a style(css) in the numbers and to send to the already formatted modal(see image 2)? Or some other way?

Image 1:

Image 2:

$('#teste').on('shown.bs.modal', function () {
    $('#myInput').trigger('focus')
  })

  $(document).ready(function(){
      $("#mybtn1").click(function() {
          var p=$("#teste #result");
          $.each($("input[name='disponivel']:checked"), function() {
              $(p).html($(p).html() + '  ' + $(this).val());
          });      
      }); 
  });

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>


      <div class="modal fade" id="teste" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">Reservados </h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <form>
                <div class="form-group">
                  <p id="result"></p>
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>
      
<form id="form">
  <ul>
      <li><input type="checkbox" value="1" name="disponivel">1</li>
      <li><input type="checkbox" value="2" name="disponivel">2</li>
      <li><input type="checkbox" value="3" name="disponivel">3</li>
      <li><input type="checkbox" value="4" name="disponivel">4</li>
      <li><input type="checkbox" value="5" name="disponivel">5</li>
  </ul>     
</form>

      <button  id = "mybtn1" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#teste" >Reservar números</button>
          <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

Answer 1

Makes a .append() with the numbers within a span, and that span you format in CSS. You also need to empty the div before otherwise it will accumulate with what you already have there. For this you use .Empty().

The CSS of span:

#result span{
   display: inline-block;
   width: 50px;
   height: 50px;
   line-height: 50px;
   background-color: red;
   color: #fff;
   text-align: center;
   border-radius: 50%;
   margin: 5px;
}

Code:

$('#teste').on('shown.bs.modal', function () {
   $('#myInput').trigger('focus')
});

$(document).ready(function(){
   $("#mybtn1").click(function() {
      var p=$("#teste #result");
      p.empty();
      $.each($("input[name='disponivel']:checked"), function() {
         $(p).append('<span>'+ $(this).val() +'</span>');
      });
   }); 
});

#result span{
   display: inline-block;
   width: 50px;
   height: 50px;
   line-height: 50px;
   background-color: red;
   color: #fff;
   text-align: center;
   border-radius: 50%;
   margin: 5px;
}

<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>

<div class="modal fade" id="teste" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Reservados </h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <p id="result"></p>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
      
<form id="form">
  <ul>
      <li><input type="checkbox" value="1" name="disponivel">1</li>
      <li><input type="checkbox" value="2" name="disponivel">2</li>
      <li><input type="checkbox" value="3" name="disponivel">3</li>
      <li><input type="checkbox" value="4" name="disponivel">4</li>
      <li><input type="checkbox" value="5" name="disponivel">5</li>
  </ul>     
</form>

<button  id = "mybtn1" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#teste" >Reservar números</button>

Adjust the red polka dots as you want by changing the width, height, line-height (must be equal to height to center vertically).