Coder Wrap provides free to use snippets

/**Typeo CSS if no need so remove it Start**/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
*{
box-sizing: border-box;
}

body {
font-family: "Poppins", sans-serif;
color: #444;
box-sizing: border-box;
margin: 0px;
}
.cw-quantity-main {
max-width: 600px; 
width: 100%; 
margin:4% auto;
display: flex;
flex-flow: row wrap;
}
.cw-quantity-item {
  max-width: 33.3%;
  padding: 3%;
  width: 100%;
}
.cw-quantity-main h3 {
text-align: center;
font-size: 16px;
font-weight: normal;
}
/**Typeo CSS if no need so remove it Start**/

.cw-quantity-group {
width: 120px;
position: relative;
display: flex;
flex-flow: row wrap;
align-items: center;
margin: auto;
}

.cw-quantity-group input {
background-color: transparent;
width: calc(100% - 60px);
text-align: center;
padding: 8px 5px 5px 5px;
height: 40px;
border: none;
border-top: #ccc 1px solid;
border-bottom: #ccc 1px solid;
font-size: 14px;
outline: none;
font-family: 'Poppins';
margin: auto;;
}
.cw-plusmins {
width: 30px;
height: 40px;
line-height: 38px;
cursor: pointer;
font-size: 18px;
border: #ccc 1px solid;
text-align: center;
-webkit-touch-callout: none;
-webkit-user-select: none; 
-khtml-user-select: none; 
-moz-user-select: none; 
-ms-user-select: none; 
user-select: none; 
}
/**Option 2 start**/
.cw-quantity-2 .cw-plusmins{ width: 36px; height: 36px; line-height: 34px;}
.cw-quantity-2.cw-quantity-group input {width: calc(100% - 72px); border: none;}

/**Option 2 end**/
/**Option 3 start**/
.cw-quantity-3 .cw-plusmins{ width: 40px; height: 40px; border-radius: 100%; line-height: 38px;}
.cw-quantity-3.cw-quantity-group input {width: calc(100% - 80px); border: none;}
/**Option 3 end**/
/**Option 4 start**/
.cw-quantity-4 .cw-plusmins{ width: 20px; height: 20px;line-height: 18px;}
.cw-quantity-4.cw-quantity-group input {width: calc(100% - 20px); border-left: #ccc 1px solid;}
.cw-quantity-4 .cw-mins { position: absolute; right: 0px; bottom: 0px;}
.cw-quantity-4 .cw-plus { position: absolute; right: 0px; top: 0px;}

/**Option 4 end**/
/**Option 5 start**/
.cw-quantity-5 .cw-plusmins { background-color: #cccccc;}
/**Option 5 end**/
/**Option 6 start**/
.cw-quantity-6.cw-quantity-group input {width: calc(100% - 72px); border: #ccc 1px solid;}
/**Option 6 end**/

function increaseQty() {
	var qtyEl = event.target.previousElementSibling;
	var value = parseInt(qtyEl.value, 10);
	value = isNaN(value) ? 0 : value;
	value++;
	qtyEl.value = value;
}
function decreaseQty() {
	var qtyEl = event.target.nextElementSibling;
	var value = parseInt(qtyEl.value, 10);
	value = isNaN(value) ? 0 : value;
	value < 1 ? value = 1 : '';
	value--;
	qtyEl.value = value;
}