JSFiddle - React, Tailwind, and code Playground

by stevenkaspar

HTML

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<input data-icon-target='#i_1' data-has-icon='true' checked type='checkbox'/>
<span class='icon' id='i_1'>icon 1</span>
<br/>
<input data-icon-target='#i_2' data-has-icon='true' checked type='checkbox'/>
<span class='icon' id='i_2'>icon 2</span>
<br/>

<input data-icon-target='#i_3' data-has-icon='true' checked type='checkbox'/>
<span class='icon' id='i_3'>icon 3</span>
<br/>

<input data-icon-target='#i_4' data-has-icon='true' checked type='checkbox'/>
<span class='icon' id='i_4'>icon 4</span>
<br/>

<script>
$('[data-has-icon="true"]').click(function(event){
  var target_id = $(this).data('iconTarget');
  $(target_id).toggleClass('hidden');
})
</script>

CSS

.hidden {
  display: none;
}