Help with elements and element values with jQuery

Heres the scenario. I am creating a page where admin users can create the WHERE part of a SQL query. The function in this page is that the admin users should be able to add undefined amount of AND’s and OR’s on the clause and show the built up clause on the page in real time. Also they should be able to remove the recently added OR’s or AND’s. My problem is I cant think of how to loop wisely thorugh all added and existing AND’s and OR’s. Also can’t figure out how I am going to get the values in the right place for the real time showing. Heres my current code. Any help is appreciated and if you didn’t understand what I am trying to achieve please ask for more details.


<html>
	<head>
		<title></title>
		<link rel="StyleSheet" href="../js/jquery-ui-1.8.13.custom/css/redmond/jquery-ui-1.8.13.custom.css" type="text/css" title="jquery-ui-plugins-styles">
		<script type="text/JavaScript" src="../js/jquery-ui-1.8.13.custom/js/jquery-1.5.1.min.js"></script>
		<script type="text/JavaScript" src="../js/jquery-ui-1.8.13.custom/js/jquery-ui-1.8.13.custom.min.js"></script>
		<script type="text/JavaScript">
		$(document).ready(function() {
		
			var op = $('#operation :selected').text();
			var value = '';
			var test = 'feature_id = 498 AND answer_data_int '
		
			$('#sql').append(test);
		
			$('#operation').change(function() {
				op = $("#operation :selected").text();
				sql = test + op +' '+ value;
				$('#sql').html(sql);
			})
			
		
			$('#value').keyup(function () {
				value = $(this).val();
				sql = test + op +' '+ value;
				$('#sql').html(sql);
			});
		
		
			// näiden uusien käsittely pitää automatisoida ja tehdä dynaamiseksi.
			$('#addOR').click(function(e) {
				e.preventDefault();
				var value2 = '';
				$('#content').append('OR <select id="operation-1"><option>=</option><option><</option><option>></option><option>>=</option><option><=</option></select');
				$('#content').append('<input type="text" id="value2">');
				sql = sql + ' OR answer_data_int ' + value2;
				$('#sql').html(sql);
			});
			
			$('#addAND').click(function(e) {
				e.preventDefault();
				var value2 = '';
				$('#content').append('AND <select id="operation-1"><option>=</option><option><</option><option>></option><option>>=</option><option><=</option></select');
				$('#content').append('<input type="text" id="value2">');
				sql = sql + ' AND answer_data_int ' + value2;
				$('#sql').html(sql);
			});
		
		});
		</script>
	</head>
	<body>
		<form method="POST" action="TEST9.php">
			<div id="content">
				Some feature: 
				<select id="operation">
					<option>=</option>
					<option><</option>
					<option>></option>
					<option>>=</option>
					<option><=</option>
				</select>
				<input type="text" id="value">
			</div>
		</form>
		<div id="sql"></div>
		<br>
		<a href="" id="addOR">add OR</a><br>
		<a href="" id="addAND">add AND</a><br>
	</body>
</html>

Anyone can help with this? Need me to try to explain it more accurate or simple?

So I have now changed the code a bit to a more understandable form I think. I have a button with id=add where from I am trying to add fields on the page. When these fields have been added, I am trying to store the values and operations into arrays. Array indexes are running numbers that corresponds the recently added field id’s. Here is the code:


                        var count = 0;
                        var values = new Array(); // Array to store all values.
                        var operations = new Array(); // Array to store all operations.

                        $('#add').live('click', function(e) {
                                e.preventDefault();
                                count = count+1;
                                values[count] = '';
                                $('#content').append('<select id="operation'+ count +'"><option>=</option><option><</option><option>></option></select>');
                                $('#content').append('<input type="text" id="value'+ count +'">');
                        });
                       
                        $('#operation'+count).live('change', function(e) {
                                e.preventDefault();
                                operations[count] = $(this).val();

                                $.each(operations, function (index, value) {
                                        alert(index + ' - ' + value);
                                        alert(values[index]);
                                });
                        });

                        $('#value'+count).live('keyup', function(e) {
                                e.preventDefault();
                                values[count] = $(this).val();

                                $.each(values, function (index, value) {
                                        alert(index + ' - ' + value);
                                        alert(operations[index]);
                                });
                        });

The problem is that I cant get the values and operations into the arrays for the recently added fields. Anyone can tell me why? I don’t understand really.