<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <h3>Passenger Number Input ( Popover Form + Spinner Input )</h3> <p>Input form with sub inputs</p> <div class="col-lg-3"> <div class="popover-markup"> <div class="trigger form-group"> <input type="number" name="passengers" id="passengers" class="form-control" value="1" disabled> </div> <div class="content d-none"> <div class="row form-group"> <label class="col-5 col-form-label"><strong>Adult</strong><br> <i> (above 17)</i></label> <div class="col-7"> <div class="input-group number-spinner"> <span class="input-group-btn"> <a class="btn btn-secondary" data-dir="dwn"><span class="fa fa-minus"></span></a> </span> <input type="text" disabled name="adult" id="adult" class="form-control text-center" value="1" max=9 min=1> <span class="input-group-btn"> <a class="btn btn-secondary" data-dir="up"><span class="fa fa-plus"></span></a> </span> </div> </div> </div> <div class="row form-group"> <label class="col-5 col-form-label"><strong>Child</strong><br> <i> (3 - 17)</i></label> <div class="col-7"> <div class="input-group number-spinner"> <span class="input-group-btn"> <a class="btn btn-secondary" data-dir="dwn"><span class="fa fa-minus"></span></a> </span> <input type="text" disabled name="child" id="child" class="form-control text-center" value="0" max=9 min=0> <span class="input-group-btn"> <a class="btn btn-secondary" data-dir="up"><span class="fa fa-plus"></span></a> </span> </div> </div> </div> <div class="row form-group"> <label class="col-5 col-form-label"><strong>Infant</strong><br> <i> (belove 2)</i></label> <div class="col-7"> <div class="input-group number-spinner"> <span class="input-group-btn"> <a class="btn btn-secondary" data-dir="dwn"><span class="fa fa-minus"></span></a> </span> <input type="text" disabled name="infant" id="infant" class="form-control text-center" value="0" max=9 min=0> <span class="input-group-btn"> <a class="btn btn-secondary" data-dir="up"><span class="fa fa-plus"></span></a> </span> </div> </div> </div> <a class="btn btn-secondary demise">Select</a> </div> </div> </div> </div>

$(function () { var $popover = $('.popover-markup>.trigger').popover({ html: true, placement: 'bottom', // title: '<?= lang("Select passengers");?><a class="close demise");">×</a>', content: function () { return $(this).parent().find('.content').html(); } }); // open popover & inital value in form var passengers = [1,0,0]; $('.popover-markup>.trigger').click(function (e) { e.stopPropagation(); $(".popover-content input").each(function(i) { $(this).val(passengers[i]); }); }); // close popover $(document).click(function (e) { if ($(e.target).is('.demise')) { $('.popover-markup>.trigger').popover('hide'); } }); // store form value when popover closed $popover.on('hide.bs.popover', function () { $(".popover-content input").each(function(i) { passengers[i] = $(this).val(); }); }); // spinner(+-btn to change value) & total to parent input $(document).on('click', '.number-spinner a', function () { var btn = $(this), input = btn.closest('.number-spinner').find('input'), total = $('#passengers').val(), oldValue = input.val().trim(); if (btn.attr('data-dir') == 'up') { if(oldValue < input.attr('max')){ oldValue++; total++; } } else { if (oldValue > input.attr('min')) { oldValue--; total--; } } $('#passengers').val(total); input.val(oldValue); }); $(".popover-markup>.trigger").popover('show'); });