How to play an input values in a div?

Question

<link href="https://fonts.googleapis.com/css?family=Fugaz+One" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="stylesheet" href="ccs/style.css">
<title>Document</title>

    <div class="item-01">
        <nav class="navbar navbar-light bg-light">
            <a class="navbar-brand" href="#">
                <i class="fas fa-utensils" style="font-size: 30pt; color: orangered" alt="Logo da loja"></i>
            </a>
            <p style="margin-top:15px; margin-right: 20px">Lanchonete Stop!</p>
        </nav>
    </div>
    <div class="item-02">
            <a class="text-center"><strong>PEDIDO:</strong></a>
            <hr style="background-color: #fff">
        <ul>
            <form action="">    
                <li>
                    <label for="prod"><strong>Prod: </strong> </label>
                    <input class="form-control" name="pedido" type="text" id="prod">
                </li>
                <li>
                    <input class="btn btn-block btn-secondary" type="submit" value="Adicionar prod">

                    <input class="btn btn-block btn-danger" type="submit" value="Alt Canc">

                    <input class="btn btn-block btn-secondary" type="submit" value="Fechar pedido">

                </li>
            </form>
        </ul>
    </div>
    <div class="item-03">

    </div>
    <div class="item-04">
        <p class="text-center">&copy; Hugo Ferreira</p>
    </div>

    <!--<div class="bg">
        <svg xmlns="https://www.w3.org/2000svg" class="bg-svg" viewBox="0 0 1251 84.406"> 
            <path id="Retângulo_1" data-name="Retângulo 1" class="cls-1" d="M58,384H1309v55s-321.707,66.18-622.008,0C345.939,363.839,58,439,58,439V384Z"
            transform="translate(-58 -384)"/>
        </svg>
    </div>-->        

</div>  


<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script>

Answer 1

I made a simple and easy little example so you can understand.

OBS1: The event keyup occurs every time the input receives information, either adding a character or removing it. It shows in the div as you write.

OBS2: there are many ways to do this, I went through the simplest.

$(document).ready(function() 
   $('#prod').on('keyup', function() {
       var prod = $('#prod').val();    // pega o conteudo do input
       var div = $('#id_div');        // escolhe a div para por o texto
       div.text(var);                // coloca o valor do input na div
   })
})