<div id="clientPayments{$itr}">	
 <td>
   <select name="payment{$itr}" id="payment{$itr}" class="select2 aw_m1 payment">
     <option value="-1">-- اختر --</option>
     {foreach $paymentsData as $mypaymentsData}
         <option value="{$mypaymentsData->finishingPayedId}" data-finishingType="{$mypaymentsData->finishingType}">{$mypaymentsData->userId}</option>
     {/foreach}
   </select>
  
  <!--<input name="finishingType{$mypaymentsData->finishingPayedId}" id="finishingType{$mypaymentsData->finishingPayedId}" type="hidden" value="{$mypaymentsData->finishingType}" />-->
  
 </td>
     
 </div>   


<script>

	$("#clientPayments{$itr}").change(function(e) {
		//get all selected ids
		$myaArray='';
		
		$noOfRows=Number(document.getElementById('hidden_itr').value);
		//alert($noOfRows);
		for($i=2;$i<$noOfRows;$i++)
		{
			if(document.getElementById("payment"+$i+""))
			{
				$value=document.getElementById("payment"+$i+"").value;
				if($value!=-1)
				{
					$myaArray+=$value+",";
				}
			}
		}
		document.getElementById("hidden_ArrayOfIds").value=$myaArray;
		
		//store selected value in hidden field
		$optiontext=$("#payment{$itr} option:selected").text();
		//alert($("#payment{$itr} option:selected").attr('data-finishingType'));
		$finishingType=$("#payment{$itr} option:selected").attr('data-finishingType');
		document.getElementById("payed{$itr}").value=$optiontext+"/"+$finishingType;
		
		
		
		//calculateRemain
		$mMaintenanceReceiptId=document.getElementById("mMaintenanceReceiptId").value;
		if($myaArray!=''&&$mMaintenanceReceiptId!=-1)
		{
			calculateRemain();
		}
		else
		{
			document.getElementById('remain').innerHTML = 0;
			document.getElementById('remain_hidden').value = 0;
		}
		
	});
	
	function calculateRemain()
	{
		//alert('dddddd');
		$noOfRows=Number(document.getElementById('hidden_itr').value);
		//alert($noOfRows);
		$sum=0;
		for($i=2;$i<$noOfRows;$i++)
		{
			if(document.getElementById("payed"+$i+""))
			{
				$value=document.getElementById("payed"+$i+"").value;
				$value = $value.split("/"); 
				$sum+=Number($value[0]);
			}
		}
		
		$ReciptTotalCost=document.getElementById('selectedReciptTotalCostLbl1_hidden').value;
		document.getElementById('remain').innerHTML = $ReciptTotalCost-$sum;
		document.getElementById('remain_hidden').value = $ReciptTotalCost-$sum;
		
		$remain = $ReciptTotalCost-$sum;
		if($remain>0)
		{
			//alert('>0');
			$( ".addpayment" ).addClass("enabel");
		}
		else
		{
			//alert('<=0');
			$( ".addpayment" ).removeClass("enabel");
		}
		

		/*// To disable:    
		document.getElementById('id').style.pointerEvents = 'none';
		// To re-enable:
		document.getElementById('id').style.pointerEvents = 'auto'; 
		// Use '' if you want to allow CSS rules to set the value*/

	}

</script>