I have the following HTML :
`<div class="experience_list">
<div class="list">
<!-- BEGIN user_job_experience -->
<div class="div_button">
<div class="edit_data" id="{ID}">
<div class="form-group label-floating"
id="title_to_remove_classes">
<label class="label_for_edit control-label"
id="title_label_{EXPERIENCE_NAME}" for="title">Title</label>
<input class="edit_true_false form-control job_input_normal"
type="text" name="experience_name_{EXPERIENCE_NAME}"
value="{EXPERIENCE_NAME}" id="{ID}_title"
disabled>
<div class="job_name_normal form-group label-floating"
id="company_to_remove_classes">
<label class="label_for_edit control-label"
id="company_label_{EXPERIENCE_COMPANY_NAME}"
for="company_label">Company</label>
<input class="edit_true_false form-control" type="text" name="experience_company_name_{EXPERIENCE_COMPANY_NAME}" value="{EXPERIENCE_COMPANY_NAME}" id="{ID}_company" disabled>
</div>
<div class=" date_form form-group label-floating row">
<!-- BEGIN date_block -->
<div class="job_date_normal col-xs-6"
id="date_from_to_remove_classes">
<label class="label_for_edit control-label"
id="dateF_label_{DATE_FROM}">From</label> <input
class="edit_true_false form-control" type="text"
class="datepicker" name="dateFrom"
id="{ID}_date1" value="{DATE_FROM}" disabled><br>
</div>
<span> - </span>
<div class="job_date_normal col-xs-6"
id="date_until_to_remove_classes">
<label class="label_for_edit control-label"
id="dateT_label_{DATE_TO}">To</label> <input
class="edit_true_false form-control" type="text"
class="datepicker" name="dateUntil"
id="{ID}_date2" value="{DATE_TO}" disabled>
</div>
<!-- END date_block -->
</div>
</div>
</div>
<div class="checkbox_experience {ID}_checkBox_button checkBtn">
<input type="checkbox" name="currently_work" class="{ID}_checkBox_button checkBtn" id="{ID}_currently_work" {EXP_CHECKED}><label for="curently_work" id="currently_work_label {ID}_checkBox_button" class="{ID}_checkBox_button checkBtn"><img class="checkbox_img {ID}_checkBox_button checkBtn" id="currently_work_img" src="{SITE_URL}/templates/css/frontend/images/check-box{EXPERIENCEPERMISION}.png"><p id="currently_work_text" class="checkBtn">I currently work here</p></label>
</div>'
<!-- END user_job_experience -->
</div>
</div>
<p id="experience_save_button">
</div>`
There is a block that dynamically creates multiple inputs for a Profile Page.
In the problem i have, each div has it's own id={ID}. The variable {ID} is then replaced using MVC, inside the View with the number of the "experience entry" that we have in the Data Base, so there are no duplicates.
What I'm trying to do is : when the user Hits Save i need to know exactly which "Experience Block" he changed.
When he presses Edit i don't give him just 1 Experience for edit, but instead i give them all (there can be 1 or XXXX experience entries), he wants to be able to update them all together.
Each input has its own id as well, example :
<input class="edit_true_false form-control job_input_normal" type="text" name="experience_name_{EXPERIENCE_NAME}" value="{EXPERIENCE_NAME}" id="{ID}_title" disabled>
So if the user has Experiences (3,7,12) i will have:
`<input id="3_title" ...>
<input id="7_title" ...>
<input id="12_title" ...>`
The same goes for each input that i have.
I need a way to save all the data from each input.
I tried adding JS code inside my html so that the variable {ID} would be replaced in the MVC as it is inside the input or the label and right now i get the last entry for each input.
code i used for Title:
`var title = $('#{ID} #{ID}_title').val();`
`var company = $('#{ID} #{ID}_company').val();`
How can i get each element acording to its own ID ...
I'm out of ideas, if you can point me into the right direction i would appreciate it, Thank you.