Quantity increment-er in oracle apex

Step 1: Create a page item & select type as a number field.

Step 2: Under page item settings scroll down to pre & post text.

PreText : <button class="ui-datepicker-trigger a-Button a-Button--calendar"  id="minusButton45act" type="button" title="Remove" aria-label="Remove"><span class="t-Icon fa fa-minus-square" aria-hidden="true"></span></button>

Post Text : <button class="ui-datepicker-trigger a-Button a-Button--calendar"  id="plusButton45act" type="button" title="Add" aria-label="Add"><span class="t-Icon fa fa-plus-square" aria-hidden="true"></span></button>

Step 3: Add below CSS code in the page inline CSS.

CSS Properties : 

#minusButton45act{

    border-radius: 3px 0 0 3px;

    margin-right: -1px;

    color: red;

}

#plusButton45act {

    border-radius: 0 3px 3px 0;

    color: green;

}

Save & Run the page. your page item looks like this.

Now its time to create dynamic action to increase & decrease quantity.

Dynamic Action: 

Event: Click

selection type : Jqueryselector

jqueryselector : #plusButton45act

Create True Action: Execute javascript code

Code :  var preVal = apex.item( "P31_45FT_ACTUAL_1" ).getValue();

var curVal = parseInt(preVal) + 1;

apex.item( "P31_45FT_ACTUAL_1" ).setValue(curVal);

Thank you.