I am creating online quiz. i am adding talents in registration page. talents are stored in database. talents are displaying in registration page via ajax. when user type any letter in text field. a talent list is displayed. when I click on any talent. that particular talent gets added to the another list. I am trying to create a close menu as well in another list. talent would delete if user clicked on close menu.when i click on talent list, append function adds close menu to another list in first time, when i click on talent list second time append function adds the close menu to another list in second row everything is working fine except one which is append function is adding close menu to previously created close menu or first row as well.when i click on talent list again. it adds the close menu to third row but again it is adding close menu to both previously created close menus or previous two rows.
Is it possible that append function does not add close button to previous rows or previously created close buttons.
would you please help me?
$(document).ready(function(){
$('.textfield').keyup(function(e){
var query_string = $.trim($(this).val());
//alert(query_string.length);
var count=query_string.length;
if(count!==0)
{
setTimeout(function(){
$.ajax({
type: "post",
url: "autosuggestion.php",
data: { name:query_string},
cache:false,
success: function(data)
{
$('#dropdownlist').html(data);
$('#dropdown li').one('click',function(e)
{
var return_value = $(this).text();
var value= $('<li></li>').text(return_value).addClass('appenddata');
$('#skill').append(value);
var code='✖';
var a=$('<span></span>').html(code);
$('.appenddata').append(a);
});
}
});
},1500);
}
});
});
php file Talents are fetched from this file and displayed in registration page.
<?php
mysql_connect('localhost','root','');
mysql_select_db('questions');
if(isset($_POST['name']))
{
$username = mysql_real_escape_string(trim($_POST['name']));
$sql = "SELECT `subject` FROM `suggestion` WHERE `subject` LIKE '$username%'";
$myquery = mysql_query($sql) or die(mysql_error());
if(mysql_num_rows($myquery) !=0)
{ echo '<div id="dropdown">';
while(($row = mysql_fetch_array($myquery ))!==false)
{
echo '<li>'.$row['subject'];
}
echo '</li></div>';
}
else
{
echo '<div id="innerinput12"> Kindly select from Drop-down list</div>';
echo "<script type='text/javascript'>var id = document.getElementById('innerinput12');
setTimeout(function(){id.style.display = 'none';},2500); </script>";
}
}
?>
I figured out. the mistake that i made i was appending close menu to li element. close menu was being added to all li element of ordered list because I didn't assign position or index number.
I used .eq() jquery function to define the position of li element in ordered list.
$('.appenddata').eq(i).append(a);