선택한 요소 addClass, removeClass, toggleClass

#your_id{display:flex; flex-wrap: wrap; align-content: space-around; border-top:2px solid #332965; border-bottom:2px solid #332965; padding-top:25px; margin-bottom:20px; padding-bottom:15px;}
#your_id p{width:32%; padding:10px 10px; border-radius:8px; margin:0; margin-bottom:10px; font-size:14px; margin-right:calc(4%/3); cursor:pointer; color:#332965; font-weight:500;}
#your_id p:nth-of-type(3n){margin-right:0;}
.onb{background:#332965; color:#fff;}
.offb{background:#fff; color:#333; border:1px solid #332965;}​

<div id="your_id">
		<p class="offb">1</p>
        <p class="offb">2</p>
        <p class="offb">3</p>
        <p class="offb">4</p>
</div>

const bun = document.getElementById("your_id").children;
	
	 for(var i=0; i < bun.length; i++){
        bun[i].addEventListener('click', function(event){
			
			if(this.classList.contains('onb')===false){ addClass(this); }else{ removeClass(this); }

		});
    }
	
	function addClass(e){
		e.classList.replace('offb', 'onb');
	}
	function removeClass(e){
		e.classList.replace('onb', 'offb');
	}
    
    // 클래스 이름 변경
	function setClassName(id) {
		id.classList.toggle("rotate");
	}

스크립트가 html보다 아래에 위치해야한다.