Unable to access id pass to bootstrap modal

<div class="action-buttons bigger-125" align="center">
																			<a href="#edit-event-modal">
																				
																			</a>

																			<a href="#del-event-modal">
																			^__i class="fa fa-times">
																			</a>
																			<!--<a href="#myModal" class="btn">Delete Project</a>-->
																</div>

<!-- Delete Project Modal -->
    <div id="del-event-modal" class="modal fade">

        <div class="modal-dialog">

            <div class="modal-content">

                <div class="modal-header">

                    

                    <h4 class="modal-title">Confirmation</h4>

                </div><!--//modal-header-->

                <div class="modal-body">

                    <p class="text-warning">Do you want to Delete this project?</p>
					
			
                </div> <!--//modal-body-->

                <div class="modal-footer">

                 <!--   -->
				     

				    


                </div> <!--//Modal-footer -->

            </div><!--//modal-content-->

        </div><!--//modal-dialog-->

    </div><!--//modal-->
<!--// Delete Project Modal -->

<!-- edit project modal -->
  <div id="edit-event-modal" class="modal fade">

        <div class="modal-dialog">

            <div class="modal-content">

                <div class="modal-header">

                    

                    <h4 class="modal-title">Edit Project</h4>

                </div><!--//modal-header-->

                <div class="modal-body">

               <div>
				 
				</div>
                </div> <!--//modal-body-->

                <div class="modal-footer">

                   <!-- 
				    
-->

                </div> <!--//Modal-footer -->

            </div><!--//modal-content-->

        </div><!--//modal-dialog-->

    </div><!--//modal-->
<!--//edit project modal-->

	$('#del-event-modal').on('show.bs.modal', function (event) {
			
			  var button = $(event.relatedTarget); // Button that triggered the modal
			  var recipient = button.data('id'); // Extract info from data-* attributes
			  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
			  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
			  var modal = $(this);
			 
			  modal.find('.modal-body #id').val(recipient);
			  
				$('#del').on('click', function (event) {
					var x = document.getElementById("id").value; 
					 $.ajax({
						url: 'delproject.php',
						type: 'POST',												
						data :{value:x} ,
						success: function(data){
						var data = JSON.stringify(data)
						alert("id sent is "+data);	
						//window.location.href="projects.php";													   
						}
					});
					
				 });
			});

$('#edit-event-modal').on('show.bs.modal', function (e) {
			
			 	 //get data-id attribute of the clicked element
				var bookId = $(e.relatedTarget).data('id');
		
				//populate the textbox
				$(e.currentTarget).find('input[name="proid"]').val(bookId);
				//var x = document.getElementById("proid").value; alert("pid"+x);

			
				/*$('#edit').on('click', function () {
				
					var x = document.getElementById("proid").value;  alert("pid"+x);
					var pnm = document.getElementById("pnm").value;  alert("pnm"+pnm);
					var pcity = document.getElementById("pcity").value;  alert("pcity"+pcity);
					var feature = document.getElementById("p_feature").value;  alert("feature"+feature);
					var spec = document.getElementById("p_spec").value;  alert("spec"+spec);


					 $.ajax({
						url: 'editproject.php',
						type: 'POST',												
						cache: 'false',
						data :{value:x,pnm:pnm,pcity:pcity,feature:feature,spec:pspec} ,
						success: function(data){
							var data = JSON.stringify(data)
							//alert("id sent is "+data);	
							window.location.href="projects.php";													   
						}
					});
					
				 });*/
			});