jQuery/JavaScript on click, list ID's names

Question

First off, my javascript is very limited so I wont try anything on my own on this one as I just cant think where to start

So, I have this structure in my website,

ul{list-style-type: none;padding:0}

<button class="clickme" type="button">Click Me!</button>

<ul>
 
    <li id="colors_body"><input type="text" class="color_input" value="ffffff"></li>
    <li id="colors_wrapper"><input type="text" class="color_input" value="000000"></li>
    <li id="colors_footer"><input type="text" class="color_input" value="575757"></li>
    
    <!--There will be at least 30-40 of elements like this that contains text input tags-->
    
    <!--And, this list arent always have Text inputs tags, there are also other tags for example, radio, select...etc-->
    <!-- <li id="radio-toggle"><input type="radio" class="radio_input" value="toggle"></li> -->
</ul>

<div class="list">

</div>

Basically, A bunch of li tags that each one have a specific ID and each of this list contains a text input tag that they have a class named color_input

So, With jQuery on clicking the clickme button I want to list all li ID names with their input values in a div
For example, on clicking the clickme button I want to get a list like this

'colors_body' => 'ffffff',  
'colors_wrapper' => '000000',  
'colors_footer' => '575757',  

EDIT: But I need to get a list that the text input tags used for colors only, this should be easy to map the list because this input tags have a specfic class named color_input The reason for that because there are other input types like radio, select...etc

Answer 1

Unsurprisingly, doing this with jQuery is a piece of cake.

you need to catch clicks on the element .clickme like this:

$('.clickme').click(function() {
});

Inside that, use a jQuery .each() loop to perform a function on each and every li, the id of which starting with colors_:

  $('li[id^="colors_"]').each(function() {
  });

and inside that, get the id and text of the element, and do whatever you want with it (in this instance I've console.logged it)

    console.log($(this).attr('id') + " => " + $(this).children('input[type=text]').val());

$('.clickme').click(function() {
  $('li[id^="colors_"]').each(function() {
    console.log($(this).attr('id')+" => "+$(this).children('input[type=text]').val());
  });
});

ul {
  list-style-type: none;
  padding: 0
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button class="clickme" type="button">Click Me!</button>
<ul>
  <li id="colors_body"><input type="text" value="ffffff"></li>
  <li id="colors_wrapper"><input type="text" value="000000"></li>
  <li id="colors_footer"><input type="text" value="575757"></li>
</ul>