i.html

<script>
var txt = document.getElementById( 'droptxt' ),
    content = document.getElementById( 'content' ),
    list = document.querySelectorAll( '.content input[type="checkbox"]' ),
    quantity = document.querySelectorAll( '.quantity' );

txt.addEventListener( 'click', function() {
    content.classList.toggle( 'show' )
} )

// Close the dropdown if the user clicks outside of it
window.onclick = function( e ) {
    if ( !e.target.matches( '.list' ) ) {
        if ( content.classList.contains( 'show' ) ) content.classList.remove( 'show' )
    }
}

list.forEach( function( item, index ) {
    item.addEventListener( 'click', function() {
        quantity[ index ].type = ( item.checked ) ? 'number' : 'hidden';
        calc()
    } )
} )

quantity.forEach( function( item ) {
    item.addEventListener( 'input', calc )
} )

function calc() {
    for ( var i = 0, arr = []; i < list.length; i++ ) {
        if ( list[ i ].checked ) arr.push( quantity[ i ].value + ' x ' + list[ i ].value )
    }

    txt.value = arr.join( ', ' )
}
</script>
<p>Click on the below text field:</p>
<div class="dropdown">
<input type="text" id="droptxt" class="list" readonly>
    <div id="content" class="content">
        <div class="list">
            <input type="checkbox" id="apple" class="list" value="Apple" />
            <label for="apple" class="list">Apple </label>
            <input type="hidden" class="list quantity" min="1" value="1" />
        </div>
        <div class="list">
            <input type="checkbox" id="banana" class="list" value="Banana" />
            <label for="banana" class="list">Banana </label>
            <input type="hidden" class="list quantity" min="1" value="1" />
        </div>
        <div class="list">
            <input type="checkbox" id="pineapple" class="list" value="Pineapple" />
            <label for="pineapple" class="list">Pineapple </label>
            <input type="hidden" class="list quantity" min="1" value="1" />
        </div>
    </div>
</div>