Getting extra data while using append on Jquery Mobile - jquery-mobile

Question

I have 2 dives with some kind of form that I want to be display.
For some reason When I am using append I am getting more text that I didn't ask for.
Here is the html-
<div data-role="collapsible" data-theme="a" data-content-theme="a">
<h3>טריקו קצר</h3>
<div dir="rtl" data-role="fieldcontain">
<label for="select-choice-1" class="select">בחר צבע:</label>
<select name="select-choice-1" id="select-choice-1">
<option value="standard">בחר</option>
<option value="לבן">לבן</option>
<option value="שחור">שחור</option>
<option value="כחול-ים">כחול-ים</option>
<option value="בורדו">בורדו</option>
<option value="ירוק">ירוק</option>
<option value="סגול כהה">סגול כהה</option>
<option value="אדום">אדום</option>
</select>
</div>
<div dir="rtl" data-role="fieldcontain">
<label for="select-choice-2" class="select">בחר מידה:</label>
<select name="select-choice-2" id="select-choice-2">
<option class="center-button"value="standard">בחר</option>
<option value="Small">S</option>
<option value="Medium">M</option>
<option value="Large">L</option>
<option value="EE">EE</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="slider" class="select">כמות:</label>
<input type="range" name="slider" id="slider" value="0" min="0" max="500" data-highlight="true" />
<div class="ui-block-a button-basket"><button data-theme="b" id="triko" class="basket">הוסף לסל</button></div>
</div>
</div>
<!-- end TRIKO -->
<!-- ---------------------------------- GUFIOT ---------------------------------------- -->
<div data-role="collapsible" data-theme="a" data-content-theme="a">
<h3>גופיות קייציות</h3>
<div dir="rtl" data-role="fieldcontain">
<label for="select-choice-3" class="select">בחר צבע:</label>
<select name="select-choice-3" id="select-choice-3">
<option value="standard">בחר</option>
<option value="לבן">לבן</option>
<option value="אפור אמריקאי">אפור אמריקאי</option>
<option value="שחור">שחור</option>
<option value="כחול-ים">כחול-ים</option>
<option value="בורדו">בורדו</option>
<option value="ירוק">ירוק</option>
<option value="סגול כהה">סגול כהה</option>
<option value="אדום">אדום</option>
<option value="כחול כהה">כחול כהה</option>
<option value="ירוק כהה">ירוק כהה</option>
<option value="טורקיז">טורקיז</option>
<option value="כתום">כתום</option>
<option value="צהוב">צהוב</option>
<option value="לילך">לילך</option>
<option value="חציל">חציל</option>
<option value="ורוד">ורוד</option>
<option value="תכלת">תכלת</option>
<option value="ירוק זית">ירוק זית</option>
<option value="אופוויט">אופוויט</option>
<option value="ורוד זועק">ורוד זועק</option>
<option value="חום">חום</option>
<option value="מג'ב / לוטר">מג"ב/לוטר</option>
<option value="צהוב בננה">צהוב בננה</option>
<option value="ירוק תפוח">ירוק תפוח</option>
</select>
</div>
<div dir="rtl" data-role="fieldcontain">
<label for="select-choice-4" class="select">בחר מידה:</label>
<select name="select-choice-4" id="select-choice-4">
<option class="center-button"value="standard">בחר</option>
<option value="Small">S</option>
<option value="Medium">M</option>
<option value="Large">L</option>
<option value="EE">EE</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="slider" class="select">כמות:</label>
<input type="range" name="slider" id="slider1" value="0" min="0" max="500" data-highlight="true" />
<div class="ui-block-a button-basket"><button data-theme="b" id="gufiot" class="basket">הוסף לסל</button></div>
</div>
</div>
<div class="order">
<h3>פרטי ההזמנה</h3>
<p class="item_name"></p>
</div>
<!-- end gofiot -->
Here is my JQ code-
$(document).ready(function(){
$('#slider').on('slidestop',function(){
var changeVar = $('#slider').val();
$(".ui-block-a").one('click',function(){
$(".item_name").append("<h2>טריקו קצר</h2>" + "צבע:" + $("#select-choice-1").val() + ", כמות: " + changeVar + ", מידה: " + $("#select-choice-2").val() + "<br>")
$("#select-choice-1").val("standard")
$('#select-choice-1').selectmenu('refresh')
$("#select-choice-2").val("standard")
$('#select-choice-2').selectmenu('refresh')
$("#slider").val(0).slider("refresh");
//$( "#select-choice-1 option:selected" ).text("fffff");
});
});
$('#slider1').on('slidestop',function(){
var changeVar1 = $('#slider1').val();
$("#gufiot").one('click',function(){
$(".item_name").append("<h2>גופיות קייציות</h2>" + "צבע:" + $("#select-choice-3").val() + ", כמות: " + changeVar1 + ", מידה: " + $("#select-choice-4").val() + "<br>")
$("#select-choice-3").val("standard")
$('#select-choice-3').selectmenu('refresh')
$("#select-choice-4").val("standard")
$('#select-choice-4').selectmenu('refresh')
$("#slider1").val(0).slider("refresh");
//$( "#select-choice-1 option:selected" ).text("fffff");
});
});
If I use the first function and then use the second I am getting another line that I didn't ask for. So insted of getting -
טריקו קצר
צבע:אפור אמריקאי, כמות: 308, מידה: Small
גופיות קייציות
צבע:שחור, כמות: 318, מידה: Small
טריקו קצר
I am getting -
טריקו קצר
צבע:אפור אמריקאי, כמות: 308, מידה: Small
גופיות קייציות
צבע:שחור, כמות: 318, מידה: Small
טריקו קצר
צבע:standard, כמות: 308, מידה: standard .
If I use just 1 of the functions its all good...

Answer 1

Solved my own problem!
It happand because ".ui-block-a" is located on the other form so I am getting 2 appends...