HTML

 	<div class="position">
				<div class="container1" align="center">
				          <table style="text-align: left; width: 99%; margin-left: auto; margin-right: auto;" border="0" cellpadding="2" cellspacing="2">
				              <tbody>
				                  <tr>
				                      <td style="vertical-align: middle; text-align: center;">Insert Before<br>
				                      </td>
				                  </tr>
                 
				                  <tr>
				                      <td style="vertical-align: middle; text-align: center;">Insert After<br>
				                      </td>
				                  </tr>
				                  <tr>
				                      <td style="vertical-align: middle; text-align: center;">delete<br>
				                      </td>
				                  </tr>
                  
				              </tbody>
				          </table>
				 </div>
	</div>
    

Javascript

 $(function(){
		var cls = true;
		var ops;

		
		document.querySelector(".container1").addEventListener("mouseenter", function() {
		        cls = false;
		});
		document.querySelector(".container1").addEventListener("mouseleave", function() {
		        cls = true;
		    });
		    ops = document.querySelectorAll(".container1 td");
		   /* for (let i = 0; i < ops.length; i++) {
		        ops[i].addEventListener("click", function() {
					alert("test");
		            document.querySelector(".position").style.display = "none";
		        });
		    }*/

		   ops[0].addEventListener("click", function() {
				//alert("download");
				if(fid!=undefined){
					var token = $("#token").val();
					 window.location.replace('https://programmerdesign.com/yonfile/transaction/force_to_download_file?id='+fid+'&access-token='+token) ;
				}
		       
		    });

		    ops[1].addEventListener("click", function() {
				if(fid!=undefined){
					pin_file(fid);
				}
		    });

		    ops[2].addEventListener("click", function() {
				if(fid!=undefined){
					delete_file(fid);
				}
		    });



		document.addEventListener("contextmenu", function() {
			
		    var e = window.event;
		    e.preventDefault();
			
			if(e.target.className=="tab-message"){
			// edit class name that you want to handle context menu
				fid = 	e.target.dataset.id;
				
		    document.querySelector(".container1").style.padding = "0px";

		    var x = e.clientX;
		    var y = e.clientY;

		    var docX = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || document.body.offsetWidth;
		    var docY = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || document.body.offsetHeight;

		    var border = parseInt(getComputedStyle(document.querySelector(".container1"), null).getPropertyValue('border-width'));

		    var objX = parseInt(getComputedStyle(document.querySelector(".container1"), null).getPropertyValue('width')) + 2;
		    var objY = parseInt(getComputedStyle(document.querySelector(".container1"), null).getPropertyValue('height')) + 2;

		    if (x + objX > docX) {
		        let diff = (x + objX) - docX;
		        x -= diff + border;
		    }

		    if (y + objY > docY) {
		        let diff = (y + objY) - docY;
		        y -= diff + border;
		    }

		    document.querySelector(".position").style.display = "block";

		    document.querySelector(".position").style.top = y + "px";
		    document.querySelector(".position").style.left = x + "px";
			}
		});
		window.addEventListener("resize", function() {
		    document.querySelector(".position").style.display = "none";
		});
		document.addEventListener("click", function() {
		    if (cls) {
		        document.querySelector(".position").style.display = "none";
		    }
		});
		document.addEventListener("wheel", function() {
		    if (cls) {
		        document.querySelector(".position").style.display = "none";
		        static = false;
		    }
		});

	});
	

CSS

  .position {
	    position: absolute;
	    width: 1px;
	    height: 1px;
	    z-index: 2;
	    display: none;
	}

	.container1 {
	    width: 220px;
	    height: auto;
	    border: 1px solid black;
	    background: rgb(245, 243, 243);
	}

	.container1 p {
	    height: 30px;
	    font-size: 18px;
	    font-family: arial;
	    width: 99%;
	    cursor: pointer;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    background: rgb(245, 243, 243);
	    color: black;
	    transition: 0.2s;
	}

	.container1 p:hover {
	    background: lightblue;
	}

	td {
	    font-family: arial;
	    font-size: 20px;
	}

	td:hover {
	    background: lightblue;
	    transition: 0.2s;
	    cursor: pointer;
	}